浅谈React + Webpack 构建打包优化

本文介绍了React + Webpack 构建打包优化，分享给大家，具体如下：

使用 babel-react-optimize 对 React 代码进行优化

检查没有使用的库，去除 import 引用

按需打包所用的类库，比如 lodash 、 echart 等

lodash 可以采用babel-plugin-lodash 进行优化。

需要注意的是

在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这个插件。正常情况下，如果你在代码中没有引用到组件的 PropTypes ，则完全没问题。如果你的组件用到了，那么使用该插件可能会导致问题。

具体见：

https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types#is-it-safe

Webpack 构建打包优化

Webpack 构建打包存在的问题主要集中于下面两个方面：

1. Webpack 构建速度慢
2. Webpack 打包后的文件体积过大

Webpack 构建速度慢

可以使用 Webpack.DDLPlugin ， HappyPack 来提高构建速度。具体参见小铭在 DMP DDLPlugin 的文档。原文如下：

Webpack.DLLPlugin

添加一个 webpack.dll.config.js
主要是用到一个 DllPlugin 插件，把一些第三方的资源独立打包，同时放到一个 manifest.json 配置文件中，

这样在组件中更新后，就不会重新 build 这些第三方的资源，

1. 同时独立配置 dll/vendors.js 文件，提供给 webpack.dll.config.js
2. 修改 package.json

在 scripts 中添加: "dll": "webpack --config webpack.dll.config.js --progress --colors ", 。

执行 npm run dll 以后，会在 dll 目录下生产 两个文件 vendor-manifest.json ，vendor.dll.js

配置 webpack.dev.config.js 文件，加入一个 DllReferencePlugin 插件，并指定 vendor-manifest.json 文件

new webpack.DllReferencePlugin({
 context: join(__dirname, 'src'),
 manifest: require('./dll/vendor-manifest.json')
})

修改 html

<% if(htmlWebpackPlugin.options.NODE_ENV ==='development'){ %>
 <script src="dll/vendor.dll.js"></script>
<% } %>

注意，需要在 htmlWebpackPlugin 插件中配置 NODE_ENV 参数

Happypack

通过多线程，缓存等方式提升 rebuild 效率 https://github.com/amireh/happypack

在 webpack.dev.config.js 中针对不同的资源创建多个 HappyPack, 比如 js 1 个，less 1 个，并设置好 id

new HappyPack({
 id: 'js',
 threadPool: happyThreadPool,
 cache: true,
 verbose: true,
 loaders: ['babel-loader?babelrc&cacheDirectory=true'],
}),
new HappyPack({
 id: 'less',
 threadPool: happyThreadPool,
 cache: true,
 verbose: true,
 loaders: ['css-loader', 'less-loader'],
})