如果只有一個捆綁的JavaScript文件，模塊如何動態加載？

我知道當使用像webpack這樣的模塊加載器時，得到的輸出將是一個單獨的JavaScript文件，如bundle.js。現在index.html我只需要引用如下：如果只有一個捆綁的JavaScript文件，模塊如何動態加載？

<script src="bundle.js"></script>

是，如果我有一個.js文件，如何動態加載模塊出現我的問題？也許我在這裏理解我的方式，但是不是模塊加載器到而不是服務器模塊.js文件的整個想法，直到需要它？因此，不必從應用程序的開始加載所有文件，並且需要加載index.html。那麼如果我已經從index.html提供了單個bundle.js文件，那麼該文件中的獨立模塊如何按照需要提供異步服務？那時我覺得我已經下載了這個文件，所以沒有獲得性能部分。

當僅爲單個捆綁的.js文件提供給整個應用程序時，模塊加載程序如何工作？

來源

2016-11-24 atconway

束僅包括有：'required'或任何（取決於所述捆綁），所以你可以在一個模塊的容載文件項目（或者更可能是您的項目正在構建的框架），並且只有您在您的應用程序中明確使用的項目被綁定。 – Marty

Webpack不是模塊加載器，它是模塊* bundler *。正如你所說，它將所有代碼合併成一個文件。這是非常不同的，沒有任何動態加載發生在任何地方。 –

@Sami：除非你做代碼拆分，這是非常鼓舞人心的。 –

當您使用Webpack這種方式時，您不使用任何模塊加載器或動態加載。 Webpack是一個模塊bundler這意味着它將解析所有必需的模塊，將它們合併成一個文件，並允許您將它包含在您的網頁（或任何您想使用代碼的地方）中。

如果您在一個支持模塊加載的環境中工作，那麼您甚至不需要Webpack（這裏不會進行縮小，轉換或填充）。你只需要使用模塊加載，就是這樣。

來源

2016-11-24 04:23:53

那麼建議使用帶有模塊加載器的Webpack來獲得兩全其美的好處嗎？或者當您提到「支持模塊加載的環境」時，您是指支持「ES6模塊加載」或其他方式的瀏覽器？ – atconway

@atconway這取決於您的要求。代碼拆分的Webpack對於很多人來說可能是一個好主意。是的，我的意思是ES6的原生支持，當然在網絡上，它仍然可以從捆綁中受益，因爲它意味着更少的加載。但是在任何情況下你都不需要帶有Webpack的模塊加載器。 –

正如其他人所建議的，您可能會感興趣的是webpack的代碼分割。我也是webpack的新手，但這是我的理解。

app.js：

var $ = require('jquery'); // adds contents of jquery.js into the global bundle 

// do stuff on runtime 

module.exports = (function() { 

    // do stuff above the fold (but only if app() is called) 

    // time to use a module from outside of our bundle 
    require.ensure([ 
     "./below_the_fold.js" // here you define which files will the new chunk contain (it is created on webpack compile) 
    ], (require) => { 
     // callback after the chunk is dynamically loaded by JSONP 

     var moduleBelow = require("./below_the_fold.js"); // this particular require() which is inside require.ensure doesn't add required file into the bundle 

     // do stuff below the fold (that needs moduleBelow which is what below_the_fold.js exports) 

    }, 'below_the_fold'); // optional name of chunk file 

}); 

window.app = module.exports

below_the_fold.js：

module.exports = (() => { 
    // some logic we don't want into our global bundle because it's heavy or rarely used 

    console.log('doing stuff below the fold is now possible'); 
})();

來源

2016-11-24 15:32:30

如果只有一個捆綁的JavaScript文件，模塊如何動態加載？

回答

相關問題