vue-cli3前端优化

前端优化

1.Compression-webpack-plugin

安装：

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

作用：

• 打包后会生成 .gz 压缩文件，减少文件资源体积，提升网络传输速率，优化web页面加载时间

原理：

• 浏览器请求资源文件时会自动带一个Accept-Encoding的请求头告诉服务器支持的压缩编码类型

• 服务器配置开启gzip选项：

• 接收客户端资源文件请求，查看请求头Content-encoding支持的压缩编码格式，如果是包含gzip那么
  在每次响应资源请求之前进行gzip编码压缩后再响应返回资源文件(在响应头会带上Content-encoding: gzip)

• 浏览器接收到响应后查看请求头是否带有Content-encoding:gzip，如果有进行对返回的资源文件进行解压缩然后再进行解析渲染

• 需要后端配置gzip，不需要服务器压缩js、css文件，减少服务器CPU资源，直接返回已经压缩好的文件

2.uglifyjs-webpack-plugin

安装：

npm install [email protected] --save-dev

注意版本，如果是2.0版本以上可能会报错

作用：

• 压缩打包体积，去掉console.log，混淆代码

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  ...
  configureWebpack: config => {
    const configNew = {}
    if (process.env.NODE_ENV === 'production') {
      // configNew.externals = externals
      configNew.plugins = [
        // gzip
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: false
        }),
        new UglifyJsPlugin({
          uglifyOptions: {
            // 移除 console
            compress: {
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log']
            }
          }
        })
      ]
    }
  ...
}