vue cli2.0和3.0 开启gzip压缩

码工思博

先说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即可,如果报错1592818634.jpg

说明你的plugin版本太高了,降低版本即可
npm install --save-dev compression-webpack-plugin@1.1.12
**
在推荐一个优化,在webpack.prod.conf.jsUglifyJsPlugin中添加一下一句话`
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

})\]

}

 }
 }

 }

即可

阅读 2.4k
82 声望
9 粉丝
0 条评论
82 声望
9 粉丝
文章目录
宣传栏