webpack打包性能优化（一）gzip、externals

简介

webpack 打包时，性能优化的一些方式，组成了这个系列文章，欢迎点赞和评论交流～

系列文章

webpack打包性能优化（一）gzip、externals

webpack打包性能优化（二）按需引入和加载

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