使用Webpack,我创建了多个块/包,因此不会一次加载整个应用程序。我已经手动选择了要将哪些依赖项移入自己的块中。这是我的配置的重要部分:
module.exports = {
devtool: 'inline-source-map',
mode: process.env.NODE_ENV,
entry: {
main: './src/index.tsx',
},
optimization: {
runtimeChunk: {
name: 'runtime',
},
splitChunks: {
cacheGroups: {
...makeChunkCacheGroup('chunk_1', /\/node_modules\/(... list of deps ...)(\/|$)/),
...makeChunkCacheGroup('chunk_2', /\/node_modules\/(... list of deps ...)(\/|$)/),
},
},
},
// ...
};
function makeChunkCacheGroup(name, ...moduleNameRegexps) {
return {
[name]: {
name,
test: module => moduleNameRegexps.some(pattern => pattern.test(module.context)),
chunks: 'all',
minChunks: 1,
minSize: 0,
maxSize: Infinity,
reuseExistingChunk: true,
enforce: true,
},
};
}
此配置为我提供runtime
,main
,chunk_
和chunk_2
。但是,所有这些块都被注入到index.html
中,因此它们都在初始页面加载期间加载,而不是动态加载(正如我天真的预期)。
我过去曾使用SystemJS将内容捆绑为多个捆绑包,并且它只会下载应用程序所需的给定捆绑包。我现在意识到Webpack无法以这种方式工作。
是否有一种方法可使Webpack最初仅下载runtime
和main
捆绑软件,然后根据需要下载其他捆绑软件?
注释1:我意识到我可以使用动态导入,例如import('some-dep').then(...)
,但根据代码库的大小这样做是不合理的,而且,我认为这种事情最好留给配置(模块不必选择应该选择的部门)动态加载)。
注意2:我确实尝试指定了多个入口点,但从未成功。该应用程序实际上只有一个入口点。但是,例如,我们在src/app/elements/
下有多个目录,如果这些目录中的每个目录都以自己的捆绑包结尾,然后将其动态加载,那将是完美的选择。我无法以自动化/智能的方式工作。