我其实一点也不懂,上网去查看别人都没写前端怎么做,就很郁闷。自己尝试一番才知道为何没人写前端的操作步骤,因为非常简单——生成 gz 文件,上传服务器即可。所以为了避免有人和我一样懵逼,索性记录下来以供参考。开门见山直接说操作方法:
我刚好用的是 vue boilerplate 来做开发,所以直接改配置就能做到压缩:
- 找到 config/index.js
- 找到 productionGzip: false
- 将 false 改为 true
- npm i -D compression-webpack-plugin
- 重新允许 npm run build
- 可以看到生成了一些 gz 文件
- 其他都不用变,把原来的代码和新生成的 gz 文件一并提交到服务器上就行了
- 找运维给服务器开启 gzip 即可
注:webpack.prod.conf.js 里应该要有以下这段代码:
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}