vue-cli3-前端打包优化--gzip、dll

一、在vue.config.js中

const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '' : '',
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 移除 preload 插件
    config.plugins.delete('preload')
  },
  configureWebpack: config => {
    // 开发环境不需要gzip
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionWebpackPlugin({
        // 正在匹配需要压缩的文件后缀
          test: /\.(js|css|svg|woff|ttf|json|html)$/,
          algorithm: 'gzip',
          // // 大于10kb的会压缩
          threshold: 10240,
          // // 其余配置查看compression-webpack-plugin
          deleteOriginalAssets: true, // 删除原文件
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          filename: '[path].gz[query]'
        })
      )
    }
    // config.plugins.push(new BundleAnalyzerPlugin())
    // 是否开启分析
    if (process.env.npm_config_report) {
      config.plugins.push(new BundleAnalyzerPlugin())
    }
  },
  pluginOptions: {
    dll: {
    // 入口配置
      entry: {
        css: ['./src/base/css'],
        viewdesign: ['view-design'],
        pdfjsDist: ['pdfjs-dist'],
        moment: ['moment'],
        lodash: ['lodash'],
        jquery: ['jquery']
      },
      // 输出目录
      output: path.join(__dirname, './public/dll'),
      // 是否开启 DllReferencePlugin,
      // 默认情况下，插件没有检测到 vendor (执行 `npm run dll` 指令生成的 chunk 包)，会自动关闭。
      // 在有需要的情况下可以手动关闭插件，例如：
      // 1. 为了在开发环境使用vue代码中的提示，可配置只在生产环境开启分包模式，`open : process.env.NODE_ENV === 'production'`。
      // 2. 在构建目标(`target`)为 `node`，需要手动关闭 dll 插件。
      open: process.env.NODE_ENV === 'production',
      // open: true,
      inject: true
    }
  },
  productionSourceMap: false,
  css: {
    sourceMap: false,
    extract: false
  }
}

二、nginx配置

    gzip  on;   #开启gzip
    gzip_static on;  #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
    gzip_min_length 1k; #低于1kb的资源不压缩
    gzip_comp_level 3; #压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片，下面会讲为什么。
    gzip_disable "MSIE [1-6]\.";  #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_vary on;  #是否添加“Vary: Accept-Encoding”响应头

gzip_static on配置后在Response Headers中有Content-Encoding:gzip