vue 打包文件体积过大优化

vue[打包的chunk-vendors.xxx.js文件过大导致加载过慢问题]

因app首页加载不流畅，于是去检查首页加载项的耗时，最终发现是前端加载时js文件太大，导致首页加载太慢，于是选择了以下方案进行优化。

一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。

npm使用下面命令安装

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

yarn使用下面命令安装

yarn add compression-webpack-plugin --save-dev

二、接下来要去修改vue的配置文件 vue.config.js

const CompressionWebpackPlugin = require("compression-webpack-plugin");
  chainWebpack: config => {
    // 生产环境，开启js\css压缩
    if (process.env.NODE_ENV === "production") {
      config.plugin("compressionPlugin").use(
        new CompressionWebpackPlugin({
          test: /\.(js|css|less)$/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          minRatio: 0.8,
          deleteOriginalAssets: true // 删除源文件
        })
      );
    }
  }

三 打包后对比

优化前

image.png

优化后

image.png