简介
webpack 打包时,性能优化的一些方式,组成了这个系列文章,欢迎点赞和评论交流~
系列文章
webpack打包性能优化(一)gzip、externals
webpack打包性能优化(三)uglify、happypack
webpack打包性能优化(四)esbuild loader
版本升级
使用高版本
的 Webpack 和 Node.js,高版本的包在打包速度和性能上都做了很多优化,有条件的情况下升级版本时最方便的
使用 gzip 压缩打包后的 js 文件
这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变)
webpack.config.prod.js 中
var CompressionWebpackPlugin = require('compression-webpack-plugin');
// 在 plugins 中添加
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 文件,再在本地解压,时间缩短了很多。
echart 使用外链 js 文件,不引入 npm 包
在 html 中引入 echarts.min.js
,china.js
,echarts-gl.min.js
,echarts-wordcloud.min.js
,不引入 npm 包
在 webpack生产打包配置中增加:
externals: {
"react": "React", // 左边引入时的自定义名字,右边全局变量名
"react-dom": "ReactDOM",
"jquery": "jQuery",
"echarts": "echarts"
}
doc.webpack-china.org/configurati… 打包后文件大小减小 0.5M