使用 webpack 进行代码拆分，例如 https://github.com/erikras/react-redux-universal-hot-example

Question

我想一起编写多个路由的代码拆分。对于 bundle1.js 中的前家和小部件，bundle2.js 中的调查和关于以及 bundle3.js 中的登录。

因此，当我刷新主页时，它只会加载 bundle1.js，在转到小部件页面时，它将显示小部件，而不会像单页应用程序那样获取其他文件。

当用户点击调查时，它将下载 bundle2.js 并显示该页面等。在此过程中，页面大小将保持较低，即使变大也是如此。

生产 webpack link 是 https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/prod.config.js

Answer 1

如果使用 Webpack 1 定义拆分点，您将能够为您的拆分点传递一个名称，从而允许您将多个拆分点编译成一个块，例如

require.ensure([], () => {
    const Home = require('./home');
    // render Home.
}, 'bundle1');

require.ensure([], () => {
    const Widgets = require('./widgets');
    // render Widgets.
}, 'bundle1');

require.ensure([], () => {
    const Survey = require('./survey');
    // render Home.
}, 'bundle2');

以上只会产生两个块，即：

bundle1.js
bundle2.js

不幸的是，如果您将 Webpack 2 与 System.import() / import() 而不是 require.ensure 一起使用，则无法命名您的块，但是有人说能够提供配置同样的效果——https://github.com/webpack/webpack/issues/1949

Answer 2

我遵循了 https://github.com/bertho-zero/react-redux-universal-hot-example 样板，它已更新并使用 webpack 2 进行代码拆分

使用 webpack 进行代码拆分，例如 https://github.com/erikras/react-redux-universal-hot-example

Code splitting using webpack for example https://github.com/erikras/react-redux-universal-hot-example

reactjs

webpack

webpack-dev-server