Vue中chunk-vendors.js文件过大问题

在Vue前端项目开发中,发现每次都会有一个很大的chunk-vendors.js文件要载入,这也使得页面加载时间变长。

chunk-vendors.js是什么

顾名思义,chunk-vendors.js文件其实包含的是除了自己项目模块外的第三方的依赖,也就是node_modules文件夹里边的内容。

chunk-vendors.js分析

我们可以通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js文件的内容。

安装插件:

1
npm install --save-dev webpack-bundle-analyzer

vue.config.js中引入这插件:

1
2
3
4
5
6
7
8
9
10
11
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports={
configureWebpack:config =>{
return {
plugins:[
// 使用默认配置
new BundleAnalyzerPlugin()
]
}
}
}

未完待续…

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道