前端性能优化：Vue项目打包后app.xxx.js 和 chunk-vendors.xxx.js 文件太大，导致页面加载时间太长

news2025/2/4 8:50:15

问题场景，如下图，环境上的 app.js 和chunk-vendors.js 两个文件大小，高达3.4M 和 2M ，加载所耗费的时间也很长。

下面说一下如何解决：

1、首先需要安装插件 compression-webpack-plugin，我这里用的是6.1.1的版本

npm i compression-webpack-plugin@6.1.1

2、npm安装包成功后需要修改 vue.config.js 中的配置，这里只展示此次优化相关的部分

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

chainWebpack: (config) => {
    config.when(process.env.NODE_ENV === "development", (config) => {
      config.devtool("source-map");
    });
    config.when(process.env.NODE_ENV === "production", (config) => {
      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,
        },
      ]);
    });
  },

3、修改后，先本地 npm run build 打包，打包成功后，看下包里的js文件中是否包含 .gz 结尾的文件，如果包含就可以把包部署到相关环境上

4、（最重要）需要修改nginx的配置文件，nginx.conf 在http{}里打开gzip开关，并添加配置

http {
    #开启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].';
}

5、修改nginx配置之后，需要重启nginx生效，然后去页面清空浏览器环缓存后查看，app.js 和chunk-vendors.js 两个文件变成了 884kB 和642 kB，大小和加载时间都有明显的下降