webpack打包性能优化(一)gzip、externals

3,154 阅读1分钟

简介

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.jschina.jsecharts-gl.min.jsecharts-wordcloud.min.js,不引入 npm 包

在 webpack生产打包配置中增加:

externals: {
    "react": "React",   // 左边引入时的自定义名字,右边全局变量名
    "react-dom": "ReactDOM",
    "jquery": "jQuery",
    "echarts": "echarts"
}

doc.webpack-china.org/configurati… 打包后文件大小减小 0.5M