vue elment admin打包优化

gzip压缩

vue-element-admin配置

安装依赖

npm install compression-webpack-plugin --save

在vue.config.js添加：

const CompressionWebpackPlugin = require('compression-webpack-plugin') 
const productionGzipExtensions = ['html','js', 'css']

然后继续在vue.config.js下面的configureWebpack中添加

这里有两种形式 configureWebpack: {}

// gzip压缩
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' + productionGzipExtensions.join('|') + ')$'
        ),
        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        deleteOriginalAssets: false // 删除原文件
      })
    ]

configureWebpack: （config）=>{}

 // gzip压缩
      const productionGzipExtensions = ['html', 'js', 'css']
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' + productionGzipExtensions.join('|') + ')$'
          ),
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: true // 删除原文件
        })
      )

filename：目标资源名称， [file] 会被替换成原始资源，[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串，默认值是 “[path].gz[query]”。
algorithm：可以是 function(buf, callback) 或者字符串，对于字符串来说依照 zlib 的算法（或者 zopfli 的算法），默认值是 “gzip”。
test：所有匹配该正则的资源都会被处理，默认值是全部资源。
threshold：只有大小大于该值的资源会被处理，单位是 bytes，默认值是 0。
minRatio：只有压缩率小于这个值的资源才会被处理，默认值是 0.8。

代码压缩

安装依赖：

cnpm i -D uglifyjs-webpack-plugin

在vue.config.js 最上边引入依赖

// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

在vue.config.js module.exports configureWebpack 里配置

// 代码压缩
    config.plugins.push(
        new UglifyJsPlugin({
            uglifyOptions: {
                //生产环境自动删除console
                compress: {
                    warnings: false, // 若打包错误，则注释这行
                    drop_debugger: true,
                    drop_console: true,
                    pure_funcs: ['console.log']
                }
            },
            sourceMap: false,
            parallel: true
        })
    )