优化 Vue项目中 app.js 文件过大，初始化加载过慢、带宽占用过大等问题

原创已于 2025-01-15 11:55:46 修改 · 656 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2025-01-15 11:53:28 首次发布

已亲测，绝对有效，底部有改善前后对比图证明。

1.服务器 nginx 增加配置

#开启gzip压缩
gzip on;
#设置gzip压缩级别，2级是性价比最高的
gzip_comp_level 2;
#设置动态gzip压缩的文件类型
gzip_types text/plain text/css text/javascript application/javascript;
#http的协议版本
gzip_http_version 1.0;
#IE版本1-6不支持gzip压缩，关闭
gzip_disable 'MSIE[1-6].';

2.安装 compression-webpack-plugin

npm install compression-webpack-plugin@5.0.2

webpack的版本和compression-webpack-plugin的版本要装得一致
否则要报错: 'tapPromise' of undefined

这个一般不用装：npm install webpack –save-dev

3.vue.config.js

const CompressionWebpackPlugin = require("compression-webpack-plugin");

chainWebpack(config) {
//config.when(process.env.NODE_ENV !== 'development', (config) => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/,
          },
        ])
        .end();
      config.optimization.splitChunks({
        chunks: 'all',
        automaticNameDelimiter:'-',
        cacheGroups: {
          elementUI: {
              name: "chunk-elementUI",
              priority: 40,
              test: /[\/]node_modules[\/]_?element-ui(.*)/,
              minSize:0
          },
          moment: {
              name: "chunk-moment",
              priority: 39,
              test: /[\/]node_modules[\/]_?moment(.*)/,
              minSize:0,
              enforce:true
          },
          components: {
              name: "chunk-components",
              test: resolve('src/components'),
              minChunks: 2,
              priority: 5,
              reuseExistingChunk: true
          },
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial', // only package third parties that are initially dependent
          },
        },
      });
      config.optimization.runtimeChunk('single');

      config.performance.set("hints", false);
      config.devtool("none");
      config.plugin("compression").use(CompressionWebpackPlugin, [
        {
          filename: "[path][base].gz[query]",
          algorithm: "gzip",
          test: /\.(js|css)$/,
          threshold: 8192,
          minRatio: 0.8,
          deleteOriginalAssets: false,
        },
      ]);
    //});
}