webpack+nginx实现gzip压缩解决vue首屏加载过慢

138 阅读1分钟

1.安装compression-webpack-plugin插件

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

vue.config.js里配置:

// 引入
const CompressionPlugin = require('compression-webpack-plugin')
// 在configureWebpack中配置
new CompressionPlugin({
  algorithm: 'gzip',
  test: /\.js$|\.html$|\.css/,
  threshold: 10240,
  minRatio: 0.8
})

然后执行打包命令,压缩后的文件都有.gzip的后缀。

同时nginx也要加上下面的配置,这是让nginx根据http请求优先返回gzip的文件,

gzip_static: on

这样服务器就不必消耗cpu来压缩资源了。