Webpack 配置是 Vue CLI 设置的一部分(可以通过 vue inspect 进行检查)。这是其中的一个相关部分:
entry: {
foo: [
'.../src/foo.js'
],
barWidget: [
'.../src/barWidget.js'
],
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
},
...
<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/foo.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/barWidget.[HASH].js"></script>
foo没问题拥有尽可能多的脚本标签，但 barWidget是小部件入口点，应该立即加载，没有初始 block 依赖。我的意图是制作barWidget加载一行代码(为此目的可能会禁用哈希):<script type="text/javascript" src="/assets/js/barWidget.js"></script>
chunk-vendors 则无法加载被省略。我宁愿保留
vendors和 common block ，因为它们以合理的方式拆分，并且可以在入口点之间的客户端重用，但我需要 barWidget自动加载它依赖的 block 。一个不太可取的方法是禁用 block ，但对于 barWidget只是，其他入口点中的 block 拆分应该保持不变。一种重现它的方法基本上是一个添加了 2 个入口点的新 Vue CLI 项目，或者任何具有类似配置拆分的 Webpack 项目。
这里是 the project (为了完整性而列出):
包.json
{
"name": "foobar",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0"
}
}
module.exports = {
pages: {
foo: {
entry: 'src/foo.js',
template: 'public/foo.html',
filename: 'foo.html'
},
barWidget: {
entry: 'src/barWidget.js',
template: 'public/barWidget.html',
filename: 'barWidget.html'
},
},
};
公共(public)/barWidget.html
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>
import { createApp } from 'vue'
import Foo from './Foo.vue'
createApp(Foo).mount('#app')
<template>
<HelloWorld msg="Foo"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
}
}
</script>
import { createApp } from 'vue'
import BarWidget from './BarWidget.vue'
createApp(BarWidget).mount('#app')
<template>
<HelloWorld msg="Bar widget"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
}
}
</script>
barWidget强制自动加载chunk-vendors.[HASH].js通过 Webpack，无需在 barWidget.[HASH].js 的位置显式加载它正在使用？barWidget入口点被迫不使用其他初始 block ( chunk-vendors 等)并输出自给自足的 barWidget.js捆绑，而不影响拆分在其他入口点的工作方式？最佳答案
我认为你想要的是这个 webpack issue reply 中描述的内容
回复使用一个函数将特定入口点的依赖项排除在 block 中:
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
// ... your current config, just change the chunks property
// Exclude pre-main dependencies going into vendors, as doing so
// will result in webpack only loading pre-main once vendors loaded.
// But pre-main is the one loading vendors.
// Currently undocument feature: https://github.com/webpack/webpack/pull/6791
chunks: chunk => chunk.name !== "barWidget"
}
}
}
},
module.exports = {
configureWebpack: config => {
config.optimization.splitChunks.cacheGroups.vendors.chunks =
chunk => chunk.name !== "barWidget";
}
}
关于javascript - 在入口点自动加载 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66924519/