webpack打包压缩混淆_webpack打包性能优化

1. 使用 gzip 压缩打包后的 js 文件

这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变)

webpack.config.prod.js 中

var CompressionWebpackPlugin = require(‘compression-webpack-plugin‘);

// 在 pligins 中添加

new CompressionWebpackPlugin({ //gzip 压缩

asset: ‘\[path\].gz\[query\]‘,

algorithm: ‘gzip‘,

test: new RegExp(

‘\\\.(js|css)$‘ //压缩 js 与 css

),

threshold: 10240,

minRatio: 0.8

})

这样打包出的 css js，会有 css.gz js.gz，即压缩过的 js 和 css。

之后在服务器端的 nginx 配置中开启 gzip：

查看配置文件：vim /usr/local/etc/nginx/nginx.conf

// 写在 http 中就可以

gzip on;

gzip_types application/javascript text/css image/jpeg;

这样浏览器下载文件时还是之前的 js，但是服务器返回的压缩过的 .gz 文件，再在本地解压，时间缩短了很多。

2. echart 使用外链 js 文件，不引入 npm 包

在 html 中引入 echarts.min.js，china.js，echarts-gl.min.js，echart