javascript - Webpack-4 如何使用多个条目和 SSR 制作独立和有条件的 splitChunks
问题描述
我想从某个捆绑包中制作多个块,并由服务器有条件地使用它。html中是否放置某些脚本的逻辑由另一个应用程序控制,这不是问题。我尝试了可加载组件,但对我不起作用,因为他生成了糟糕的树依赖。
export const entry = {
testAB: testABPath,
clients: clientsPath,
styles: stylesPath,
amp: ampPath,
}
然后,我有:
export const optimization = {
splitChunks: {
chunks: 'async',
cacheGroups: {
vendor: {
test(mod) { return checkTest(/[\\/]node_modules[\\/]/, mod)},
name: 'vendor',
reuseExistingChunk: true,
filename: '[name].bundle.js',
priority: -10,
chunks: 'all'
},
headerA: {
test: new Regex('/app/src/modules/header/headerA'),
name: 'header-module-A',
reuseExistingChunk: true,
filename: '[name].bundle.js',
priority: -10,
chunks: 'all'
},
headerB: {
test: new Regex('/app/src/modules/header/headerB'),
name: 'header-module-B',
reuseExistingChunk: true,
filename: '[name].bundle.js',
priority: -10,
chunks: 'all'
}
}
}
}
这会生成一个没有 Header 模块代码的 clients.js,以及 header-module-A 和 header-module-B 文件,很酷。
方案 1
我在一个页面中调用clients.js、header-module-A 和header-module-B。一切都很好。
方案 2
我调用clients.js,header-module-A,但在某个页面中没有header-module-B。clients.js 文件不起作用,因为他的 header-module-b 有一个依赖项(该文件使用 checkDeferredModules 函数检查所有模块)。
此时,我找到了带有 runtimeChunk: 'single' 选项的解决方案https://github.com/webpack/webpack/issues/9629 ,这些会生成一个新的运行时文件。我此时的配置是这样的:
export const optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'async',
cacheGroups: {
vendor: {
test(mod) { return checkTest(/[\\/]node_modules[\\/]/, mod)},
name: 'vendor',
reuseExistingChunk: true,
filename: '[name].bundle.js',
priority: -10,
chunks: 'all'
},
...getOtherChunks,
}
}
}
我已将 runtime.js 文件放在页眉,将其余脚本放在页脚,但不起作用。
新场景1
我在一个页面中调用clients.js、header-module-A 和header-module-B。标题不起作用。
新场景2
我调用clients.js,header-module-A,但在某个页面中没有header-module-B。标题不起作用。
我在做什么错?
解决方案
推荐阅读
- vega-lite - 如何按时间单位对数据进行分箱和计数
- c - 你能解释一下 printf 的返回值分配给变量的代码吗?
- sqlite - 无法使用带有两个按钮的烧瓶从 sqlite db 中删除记录
- java - 增强循环不打印我所期望的
- javascript - 使用 Papa Parse 将 JSON 导出为 CSV
- openlayers-5 - 如何在openlayers中为静态图像(使用光栅数据和画布绘制)绘制轴(x轴和y轴)?
- docusignapi - DocuSign - 更新信封 - 添加或更新自定义文本字段
- c++ - 将二维向量传递给 CPP 中的函数
- java - Quarkus:如何将方法从命令式更改为反应式
- javascript - Socket.io 节点服务器无法向电子应用程序发出事件