vue-cli20和30-开启gzip压缩

5次阅读

共计 1137 个字符，预计需要花费 3 分钟才能阅读完成。

先说 cli 2.0 的：
下载 compression\-webpack\-plugin 这个 plugin
在你的 webpack.prod.conf.js 文件里添加以下代码：
（与 webpackConfig 平级）

// 开启 gzip 压缩
if (config.build.productionGzip) {const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

再将 config 文件夹下的 index.js 中的 productionGzip 改为 true 即可，如果报错

说明你的 plugin 版本太高了，降低版本即可
npm install --save-dev compression-webpack-plugin@1.1.12
**
在推荐一个优化，在 webpack.prod.conf.js 的UglifyJsPlugin中添加一下一句话`
compress: {

      warnings: false,
      // ===== 以下是新增的 =====
      drop_console: true, // 删除页面中的 console.log
      pure_funcs: ['console.log']
      // ===== 以上是新增的 =====
    },

可以去除掉所有的 console

接下来说 3.0 的（偷我们老大的文章）

下载

npm i \-D compression\-webpack\-plugin

我们老大只是修改了 vue.config.js

const CompressionPlugin \= require("compression-webpack-plugin")



 module.exports \= {

 assetsDir: 'public',

 runtimeCompiler: true,

 publicPath: '',

 configureWebpack: config \=> {if (process.env.NODE\_ENV \=== "production") {

 return {

 plugins: \[new CompressionPlugin({

 test: /\\.js$|\\.html$|\\.css/,

 threshold:10240,

 deleteOriginalAssets:false

})\]

}

 }
 }

 }

即可

正文完