作者:摩羯法国反弹 | 来源:互联网 | 2022-12-07 20:13
我已经使用vue cli v3完成了一个项目。建立项目后,我看到了2条警告,即
warning
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
js/chunk-vendors.2557157d.js (474 KiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (617 KiB)
js/chunk-vendors.2557157d.js
css/app.821fcb13.css
js/app.b5a47a94.js
现在检查后,我发现如果我在webpack配置中添加以下内容
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
然后它将自动将js文件分成小块。现在在vue cli 3中没有webpack.config文件。
因此,如果您可以指导如何实现此方法,以便当文件超过一定限制时自动将其分块,这将非常有帮助。
这是我看到的地方:https : //github.com/webpack/webpack/issues/3486#issuecomment-397915908
期待你的回复。
PS:我读过这并试图创建vue.config.js文件并添加里面的文件进行以下
module.exports = {
configureWebpack: {
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
}
}
但是它什么也没做。谁能帮助我让我知道该怎么做,以确保我的js文件块不超过vue的建议大小?
更新资料
根据Linus Borg的回答,我尝试将以下两个代码放入vue.config.js
文件中。尝试1:
module.exports = {
configureWebpack: {
splitChunks: {
minSize: 10000,
maxSize: 250000,
}
}
}
并尝试2:
module.exports = {
configureWebpack: {
splitChunks: {
cacheGroups: {
node_vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 1
}
}
}
}
}
在这之后,当我建立我的项目进行生产时。我看到了相同的警告,但没有更改任何大小:https : //i.imgur.com/7Hp7SXC.jpg
似乎它们都没有影响任何更改。有什么帮助吗?
1> tbonz..:
添加到我的vue.config.js文件中的以下内容是npm run build
为我的@ vue / cli项目(版本3.0.4)执行时最终将所有供应商资产分块的内容。
module.exports = {
configureWebpack:{
optimization: {
splitChunks: {
minSize: 10000,
maxSize: 250000,
}
}
}
}
隐藏警告
module.exports = {
configureWebpack:{
performance: {
hints: false
},
optimization: {
splitChunks: {
minSize: 10000,
maxSize: 250000,
}
}
}
}
2> Linus Borg..:
您误解了更改的设置,可能是因为您误读了链接到的issu注释。
这些不是告诉webpack如何/何时拆分块的限制,它们仅定义限制,在限制之上,警告会显示在控制台中,仅此而已。
您真正想要的是更改的设置splitChunks
。不幸的是,为初学者设置该选项非常复杂,因此,我建议您这篇文章以更好地了解其实际工作方式。
但是什么本文不盖的是,在最近的版本中,一个新的exerimental选项被添加到splitChunks
:maxSize
。
它应该像这样工作:
configureWebpack: {
optimization: {
splitChunks: {
minSize: 10000,
maxSize: 250000,
}
}
}
请记住,这是实验性的,因此,更可靠的方法是通过使用手动将不同的依赖项放入不同的块中,来配置splitchunks以创建不超过大小限制的块splitChunks.cacheGroups
。