vue2 打包生成的js文件过大优化

webYin2025-09-05 23:25

在Vue项目中，打包生成的JS文件过大通常是由于多种因素造成的，包括但不限于第三方库过大、冗余代码、未压缩的资源等。下面是一些优化Vue项目打包后JS文件大小的常见方法：

1.代码分割 chunk

使用Webpack的代码分割功能，可以将代码分割成多个小的chunk，实现按需加载。

2.启用 Gzip/Brotli 压缩

打包时生成 Gzip 文件（需安装 compression-webpack-plugin）

复制代码

npm install compression-webpack-plugin --save-dev

npm install path --save-dev

在vue.config.js中配置

复制代码

const path = require('path')  // 引入path模块
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
 // 关闭生产环境sourceMap（减少50%+体积）
  productionSourceMap: false,

  configureWebpack: { // 配置webpack的字段。
    //打包忽略第三方库
    externals:envBoole ? cdn.externals : {},
    //  开启代码分割
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 20000, // 最小chunk size 20KB
        maxSize: 244000, // 超过244KB自动拆分
        cacheGroups: {
          vendor: {
              test: /[\/]node_modules[\/]/,
              name(module) {
                  // 提取node_modules中的包名作为chunk名
                  const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
                  // 兼容npm包名中的@符号
                  return `npm.${packageName.replace('@', '')}`;
              },
              priority: 10,
              reuseExistingChunk: true,
          },
          // 拆分公共组件
          common: {
              name: 'common',
              minChunks: 2,
              priority: 5,
              reuseExistingChunk: true
          }
        }
      }
    },
    //  开启gzip压缩
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  },

}