前端文件打包体积优化

一、去除生产环境sourceMap

vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间

map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

生产环境是不需要sourceMap的，如下配置可以去除

module.exports = {
  //去除生产环境的productionSourceMap
  productionSourceMap: false,
}

二、 对资源文件进行压缩

npm i compression-webpack-plugin --save-dev

vue.config.js 中按照如下方式进行配置：

const CompressionWebpackPlugin = require(compression-webpack-plugin)

module.exports = {

  configureWebpack: {
    plugins:[
      new CompressionWebpackPlugin({
        filename: [path].gz[query],
        algorithm: gzip,
        // test: /.js$|.html$|.json$|.css/,
        test: /.js$|.json$|.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理      })
    ],
  },
}

安装配置之后执行npm run dev或者npm run build ,如果发现报错：

ERROR  TypeError: Cannot read property tapPromise of undefined
TypeError: Cannot read property tapPromise of undefined

应该是插件版本的问题，最新的插件需要配合webapck@5.0以上，可以把插件降低版本：

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

压缩后，dist下会出现和原来js,css同名的.gz文件

a s d

同时，要修改nginx.conf配置

http{
  gzip on;
  gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文. 
    件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
  gzip_min_length 1k; # gizp压缩起点，文件大于1k才进行压缩
  gzip_http_version 1.1;# 设置gzip压缩针对的HTTP协议版本，多层nginx的话配置1.0
  gzip_comp_level 9; # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
  gzip_types  text/css application/javascript application/json;
}

也可以只开启gzip_static, 它和gzip模块没有关联关系, 它只针对静态文件，

如果nginx中使用了多层代理，则需要将gzip_http_version 1.0配置项开启，否则gzip配置不起作用； 原因分析： 如下图所示，当前浏览器中使用的http协议基本上是1.1版本，而nginx的upstream通信协议默认是http/1.0，gzip_http_version的默认值是1.1；

因此如果配置多层代理时，如果没有配置gzip_http_version时，该值默认为1.1，而agent nginx会把请求转化为1.0版本的，此时gzip功能就会不起作用；将gzipz_http_version配置为1.0后，gzip功能正常。

配置完毕，访问网页，打开f12，看到响应头中存在 Content-Encoding:gzip 表示已经配置成功。