vue打包时,chunk-vendors.js文件过大怎么优化
当 vue
项目打包后,生成的 chunk-vendors.js
文件过大时,可以通过以下几个方式进行优化:
- 使用 CDN 引入第三方库
将一些体积较大且不经常更新的第三方库(如 Vue
、Vuex
、Vue Router
等)使用 CDN 引入,这样可以减小 chunk-vendors.js
的体积。
<!-- index.html -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 在
webpack.config.js
中配置 SplitChunksPlugin 插件
将一些重复引用的代码抽离成公共模块,避免代码冗余。
// webpack.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
- 按需引入第三方库
使用 babel-plugin-import
将第三方库按需引入,避免将整个库都打包进 chunk-vendors.js
中。
npm install babel-plugin-import -D
// babel.config.js
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}]
]
- 移除未使用的第三方库
使用工具分析代码,找出未使用的第三方库,并将其移除,从而减小 chunk-vendors.js
的体积。
以上是对 vue
打包时 chunk-vendors.js
文件过大的优化方式,其中第三种方式是比较常用的方式。