TL;DR: Webpack を使用したコード分割が必要な場合について説明していただけますか?bundle-loader
Backbone ベースのアプリを Require.js から Webpack に移行し始めたときrequire
、ルーターに次のようなステートメントがあったことを覚えています。
someMatchedRoute: function () {
require(['path-to-file'], function(module) {
// doing something with the loaded module
module();
});
}
必要なコードを残りのコードと同じバンドルに配置し、特定のルートに切り替えるときに動的に必要となる別のファイルを生成するために、次のbundle-loader
ように を使用する必要がありました。
// a function executed when the user’s profile route is matched
someMatchedRoute: function () {
require('bundle!path-to-file')(function(module) {
// doing something with the loaded module
module();
});
}
ここで、コードベースを ES6 モジュールに移行し、Webpack のドキュメントで説明さrequire.ensure
れている構文を使用すると、次のようになります。
someMatchedRoute: function () {
require.ensure(['path-to-file'], function(require) {
var loadedModule = require('path-to-file');
// doing something with the loaded module
loadedModule();
});
}
bundle-loader
複数のチャンクを生成して動的にロードする必要があるかどうかはわかりません。そして、私がそうするなら、それはどのrequire
呼び出しに行きますか —require.ensure
またはrequire
コールバックの中ですか? それとも両方?それはすべてとても混乱しています。