基于 Webpack v3 的代码分块打包

发表于 |

从 Webpack v4 开始，CommonsChunkPlugin 已经移除，分块打包可以使用 SplitChunksPlugin，配置 optimization.splitChunks。

在 Webpack v3 中，可以使用以下方法分块打包。

基于 Router 分块

安装 babel-plugin-syntax-dynamic-import（小于 7 版本） 和 react-loadable，在 .babelrc 中添加配置

1
2
3
4
{
  "presets": ["react-app"],
  "plugins": ["syntax-dynamic-import"]
}

使用 import() 方法引入组件

1
2
3
4
const LoginContainer = Loadable({
  loader: () => import("./containers/LoginContainer"),
  loading: () => null
});

分块前
分块前 bundle
分块后
分块后 bundle

基于 React.lazy 分块

1
const LoginContainer = React.lazy(() => import("./containers/LoginContainer"));