浅谈React + Webpack 构建打包优化(2)

日期：2020-05-11 栏目：程序人生浏览：次

在 module.rules 中配置 use 为 happypack/loader，设置 id

{
 test: /\.js$/,
 use: [
 'happypack/loader?id=js'
 ],
 exclude: /node_modules/
}, {
 test: /\.less$/,
 loader: extractLess.extract({
 use: ['happypack/loader?id=less'],
 fallback: 'style-loader'
 })
}

减少 Webpack 打包后的文件体积大小

首先需要对我们整个 bundle 进行分析，由哪些东西组成及各组成部分所占大小。

这里推荐 webpack-bundle-analyzer 。安装后在 webpack.dev.config.js 中添加插件即可，就能在每次启动后自动在网站打开分析结果，如下图

plugins.push( new BundleAnalyzerPlugin());

除此之外，还可以将打包过程输出成json文件

webpack --profile --json -> stats.json

然后到下面这两个网站进行分析

webpack/analyse
Webpack Chart

通过上面的图表分析可以清楚得看到，整个 bundle.js 的组成部分及对应的大小。

解决 bundle.js 体积过大的解决思路如下：

生产环境启用压缩等插件，去除不必要插件
拆分业务代码与第三方库及公共模块
webpack 开启 gzip 压缩
按需加载

生产环境启用压缩等插件，去除不必要插件

确保在生产环境启动 webpack.DefinePlugin 和 webpack.optimize.UglifyJsPlugin 。

const plugins = [
 new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
 }),
  new webpack.optimize.UglifyJsPlugin({
  compress: {
   warnings: false,
   drop_console: false //eslint-disable-line
  }
  })   
]

拆分业务代码与第三方库及公共模块

由于项目的业务代码变更频率很高，而第三方库的代码变化则相对没有那么频率。如果将业务代码和第三库打包到同一个 chunk 的话，在每次构建的时候，哪怕业务代码只改了一行，即使第三方库的代码没有发生变化，会导致整个 chunk 的 hash 跟上一次不同。这不是我们想要的结果。我们想要的是，如果第三方库的代码没有变化，那在构建的时候也要保证对应的 hash 没有发生变化，从而能利用浏览器缓存，更好的提高页面加载性能和缩短页面加载时间。

浅谈React + Webpack 构建打包优化(2)

相关推荐