मैं वर्तमान में वेबपैक के साथ नॉकआउटज प्रोजेक्ट स्थापित कर रहा हूं। मुख्य पहलुओं में से एक जो मैं हासिल करना चाहता हूं वह है बंडलों का आलसी लोडिंग। जबकि मैं कोड विभाजन को प्राप्त करने में सक्षम हूं, इसके लिए वर्तमान में ऐप को विशेष रूप से इसके लिए कोड की आवश्यकता होती है और मैं इस विशिष्ट कोड से छुटकारा पाना चाहता हूं क्योंकि मेरा मानना ​​​​है कि नॉकआउटज पहले से ही आवश्यक बुनियादी ढांचे के साथ आता है।

ऐप सेटअप के दौरान, घटकों को इस तरह से नॉकआउट में पंजीकृत किया जाता है:

ko.components.register('form-page', { require: 'components/form-page/form' });

नॉकआउट संदर्भित मॉड्यूल को एक एसिंक्स के साथ लोड करेगा जिसमें केवल घटक फॉर्म-पेज का उपयोग किया जाता है।

मेरे वेबपैक सेटअप के साथ, यह विफल हो जाएगा क्योंकि

  • वेबपैक यह पता नहीं लगाता है कि घटकों/फॉर्म-पेज/फॉर्म पर निर्भरता है
  • मॉड्यूल नामों को वेबपैक द्वारा कुछ छोटे पहचानकर्ताओं के साथ जोड़ दिया जाता है, इसलिए रनटाइम पर घटक/फॉर्म-पेज/फॉर्म अज्ञात है

आदर्श रूप से मुझे इसे एसिंक्स मॉड्यूल निर्भरता के रूप में पहचानने के लिए वेबपैक मिलेगा, लेकिन पहले चरण में मॉड्यूल नामों को संरक्षित करते समय वेबपैक कॉन्फ़िगरेशन में उपलब्ध मॉड्यूल घोषित करने के लिए पर्याप्त होगा, जिससे को इसकी निर्भरताओं की आवश्यकता हो यह।

कोई विचार यह कैसे किया जा सकता है?

2
Florian Bruckner 15 अप्रैल 2017, 13:03

2 जवाब

संक्षिप्त उत्तर यह है कि मुझे अभी तक इसे गतिशील रूप से करने का कोई तरीका नहीं मिला है। हालांकि इसे करने का एक वैकल्पिक तरीका यहां दिया गया है।

src/components/Input/Input.js

उदाहरण घटक

import ko from 'knockout';
import FormComponent from '../../../classes/FormComponent';

class InputControl extends FormComponent {
  constructor(params) {
    super(params);
  }
}

ko.components.register('input-control', {
  viewModel: InputControl,
  template: require('./Input.html')
})

src/components/index.js

Ko.components.register . लेने के लिए प्रत्येक घटक फ़ोल्डर के माध्यम से वेबपैक बिल्ट-इन स्टफ लूप का उपयोग करना

const components = require.context('./', true, /\.js$/);

components.keys().forEach(function(component) {
  const componentName = component.substr(2);
  require('./' + componentName);
});

src/app.js

यह महत्वपूर्ण है कि लागू बाइंडिंग होने से पहले घटक पंजीकृत हो जाएं अन्यथा ko को उनके बारे में पता नहीं चलेगा।

require("./components");

var PageModel = function() {...}
model = new PageModel();

ko.applyBindings(model);

मूल रूप से अपने सभी घटक बनाएं और उन सभी को एक साथ शामिल करें। हॉट मॉड्यूल रिप्लेसमेंट के साथ काम करता है और क्या नहीं। आमतौर पर काफी हल्का भी।

0
Budhead2004 17 अक्टूबर 2017, 23:18

आप कस्टम घटक लोडर का उपयोग कर सकते हैं https://knockoutjs.com/documentation/component-loaders.html

var myloader =  {
    loadComponent: function (name, componentConfig, callback) {
        if (!componentConfig.import) {
            callback(null);
            return;
        }


        componentConfig.import()
            // Using the defaultLoader so we can support the different component configs knockout supports by default
            .then(config => ko.components.defaultLoader.loadComponent(name, config, callback));
    }
}

और इसे नॉकआउट लोडर में जोड़ें। unshift का उपयोग करना इसलिए यह पहला लोडर हिट है

ko.components.loaders.unshift(myloader);

अब आपका घटक पंजीकरण बदल गया है

ko.components.register('form-page', { import: () => import(/* webpackChunkName: "form-page" */'components/form-page/form') });

यह वेबपैक के आलसी लोडिंग का लाभ उठाता है। हालांकि इस बात से अवगत रहें कि गतिशील आयात के लिए कुछ अतिरिक्त बेबेल प्लगइन्स की आवश्यकता होती है।

WebpackChunkName टिप्पणी वेबपैक को बताती है कि जेएस फ़ाइल को क्या नाम देना है जो इसे आउटपुट करता है।

0
Dan Vogel 2 जून 2019, 05:08