分析工具

  1. npm run build --report
  2. 或者
  3. yarn build --report

执行成功后，在 dist 文件夹下会生成report相关文件，用浏览器打开 report.html 文件,查看相关分析
image.png

gzip压缩

vue.config.js文件

  1. const CompressionPlugin = require('compression-webpack-plugin')
  2. //匹配此 {RegExp} 的资源
  3. const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
  4. module.exports = {
  5.   configureWebpack: {
  6.     plugins: [
  7.     new CompressionPlugin({
  8.            algorithm: 'gzip', // 使用gzip压缩
  9.            test: productionGzipExtensions, // 匹配文件名
  10.             // filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
  11.            minRatio: 0.8, // 压缩率小于0.8才会压缩
  12.            threshold: 10240, // 对超过10k的数据压缩
  13.            deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
  14.             })
  15.     ]
  16.   }
  17. }

nginx相关配置 nginx.conf

  1. server {
  2.     listen       8080;
  3.     server_name  localhost;
  4.     # 开启gzip on为开启，off为关闭
  5.     gzip  on;
  6.     gzip_static on;
  7.     # 设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。
  8.     # 默认值是0，不管页面多大都压缩。
  9.     # 建议设置成大于10k的字节数，配合compression-webpack-plugin
  10.     gzip_min_length 1k;
  11.     # 获取多少内存用于缓存压缩结果，‘16  8k’表示以8k*16 为单位获得。
  12.     # PS: 如果没有.gz文件，是需要Nginx实时压缩的
  13.     gzip_buffers 16 8k;
  14.     # 注：99.99%的浏览器基本上都支持gzip解压了，所以可以不用设这个值,保持系统默认即可。
  15.     gzip_http_version 1.1;
  16.     # 同 compression-webpack-plugin 插件一样，gzip压缩比（1~9），
  17.     # 越小压缩效果越差，但是越大处理越慢，一般取中间值
  18.     gzip_comp_level 6;
  19.     gzip_types application/javascript text/javascript text/css image/jpeg image/gif image/png image/jpg image/svg;
  20.     # 请求加个 vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩
  21.     gzip_vary on;
  22.    }

image.png

参考