vue打包时,chunk-vendors.js文件过大怎么优化

vue 项目打包后,生成的 chunk-vendors.js 文件过大时,可以通过以下几个方式进行优化:

  1. 使用 CDN 引入第三方库

将一些体积较大且不经常更新的第三方库(如 VueVuexVue Router 等)使用 CDN 引入,这样可以减小 chunk-vendors.js 的体积。


<script src="https://cdn.jsdelivr.net/npm/vue">script>
  1. webpack.config.js 中配置 SplitChunksPlugin 插件

将一些重复引用的代码抽离成公共模块,避免代码冗余。

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}
  1. 按需引入第三方库

使用 babel-plugin-import 将第三方库按需引入,避免将整个库都打包进 chunk-vendors.js 中。

npm install babel-plugin-import -D
// babel.config.js
plugins: [
  ['import', {
    libraryName: 'vant',
    libraryDirectory: 'es',
    style: true
  }]
]
  1. 移除未使用的第三方库

使用工具分析代码,找出未使用的第三方库,并将其移除,从而减小 chunk-vendors.js 的体积。

以上是对 vue 打包时 chunk-vendors.js 文件过大的优化方式,其中第三种方式是比较常用的方式。

你可能感兴趣的:(javascript,vue.js,webpack)