我在理解 Webpack splitChunks 插件的行为时遇到了问题。我正在做的是将现有站点上的旧脚本重写为组件并使用 Webpack 进行捆绑。捆绑包只是 JS，大部分是在正文的末尾加载的。但是一个小脚本需要在页面的页眉中，因为它还创建了一些稍后在页眉和正文中使用的全局方法，主要作为内联脚本。由于它用于 GA 跟踪，因此不会更改，必须尽快发送事件。
以下配置对我有用，但问题是为什么它只能以这种方式工作？
确切的问题在下面代码的注释中，但我也把它放在这里：我不明白为什么还需要包含!isUsedInAppHeader在common块的条件中。如果没有!isUsedInAppHeaderin 条件，则不会common.header创建块。然后，当我尝试通过为common.header块添加更高优先级来修复它时，它会导致app.header.js.
异步行为是我完全不理解的，因为它从未发生在app.js.
实际上，我还有另一个子问题。是否可以导出一个也立即初始化自身的公共块？或者您会完全提出另一种解决方案吗？标头中的脚本不能移动，还必须同步初始化，因为它的主要作用是为 GA 跟踪创建全局方法，这些方法必须立即在以下代码中使用。
谢谢！
网络包配置：
...
gulp.task('webpack', function(callback) {
var settings = {
...
entry: {
'app.header': './js/app.header.js',
'app': './js/app.js',
... // page specific files etc.
},
...
optimization: {
splitChunks: {
cacheGroups: {
// Node modules used in app.js
vendorsApp: {
test(module, chunks) {
let isInAppEntryPoint = chunks.map(chunk => chunk.name).includes('app');
let isNodeModule = /\/node_modules\//.test(upath.normalize(module.resource));
return isInAppEntryPoint && isNodeModule;
},
name: 'vendors',
chunks: 'all',
enforce: true,
},
// Modules shared between app.header and any other file
commonHeader: {
test(module, chunks) {
let isUsedInHeader = chunks.map(chunk => chunk.name).includes('app.header');
return isUsedInHeader;
},
name: 'common.header',
chunks: 'initial',
minChunks: 2,
minSize: 0,
// priority: 2 // (*)
},
// Modules shared between app.js and any other file
common: {
test(module, chunks) {
// QUESTION I don't understand why is it necessary to also include !isUsedInAppHeader into the condition.
// Without the !isUsedInAppHeader in the condition no common.header chunk is created.
// Then, when I try to fix it via adding priority (*) for common.header, it results
// in asynchronous initialisation of the scripts in the app.header.js
let isUsedInApp = chunks.map(chunk => chunk.name).includes('app');
let isUsedInAppHeader = chunks.map(chunk => chunk.name).includes('app.header');
return isUsedInApp && !isUsedInAppHeader;
},
name: 'common',
chunks: 'initial',
minChunks: 2,
},
}
}
},
};
var bundle = webpack(settings, function(error, stats) {
...
});
return bundle;
});
这是脚本在页面中加载的方式：
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="/js/common.header.js"></script>
<script src="/js/app.header.js"></script>
<script>
... // Immediate calling of some of the the global methods defined in app.header
</script>
</head>
<body>
...
<script src="/js/vendors.js"></script>
<script src="/js/common.js"></script>
<script src="/js/app.js"></script>
<script src="..."></script> // page specific files etc.
</body>
</html>