Question

我想将几条路线分开编码。对于bundle1.js中的ex home和widgets，在bundle2.js中的survery和about，以及在bundle3.js中登录。

因此，当我刷新主页时，它将仅加载bundle1.js，在进入窗口小部件页面时，它将显示窗口小部件，而不会将其他文件作为单页面应用程序。

当用户点击survery时，它将下载bundle2.js并显示该页面，依此类推。在此过程中，页面大小将保持较低，即使变大。

生产webpack链接为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

不幸的是，如果您使用System.import() / import()代替require.ensure而不是define('rx', -0.000000728190149); define('ry', -0.00000119748979); define('rz', −0.00000408261601);使用Webpack 2，则无法为您的名称命名，但有人说有能力在这里提供相同效果的配置 - 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

2 个答案: