在切换到新路由时切换 Webpack 入口点答案

【问题标题】：Switch Webpack Entry point on switching to new Route在切换到新路由时切换 Webpack 入口点
【发布时间】：2018-03-12 06:14:14
【问题描述】：

我有一个包含两条路由的正在运行的 React 应用程序

“/app”
“/仪表板”

另外我在 webpack 中有两个入口点

entry: {
  a: 'browser.app.jsx',
  b: 'browser.dashboard.jsx'
}

我需要将路线与入口点同步。喜欢

入口点应该是（a）再次路线（1）

入口点应该是 (b) 反对路线 (2)

我怎样才能实现这个功能？

【问题讨论】：

你熟悉code splitting吗？
并非如此。你能详细说明一下吗？

标签： reactjs webpack redux babeljs

【解决方案1】：

你不需要两个入口点来做你想做的事。
正如@or-b 评论的那样，代码拆分是要走的路。 Webpack 会为你做这件事。您只需使用 import().then() 导入要延迟加载的文件。
这是一个反应路由器的例子

export default {
    component: App,
    childRoutes: [
        {
            path: '/dashboard',
            getComponent(location, cb) {
                import('browser.dashboard.jsx').then(({ default: module }) => cb(null, module));
            }
        },
    ]
};

这应该已经可以满足您的需求了。您可以在 webpack 配置中定义如何在输出中调用块。

output: {
    filename: 'bundle.js',
    chunkFilename: '[name].chunk.js',
},

【讨论】：

实际上我正在开发企业级应用程序，我的主要目的是保持捆绑包的大小。如果我创建父子路由，那么它将导致捆绑包大小的增加。所以这就是我尝试创建多个入口点的原因。
它不会增加捆绑包的大小。你的入口点只是你的核心反应项目，每条路线都有自己的块，按需加载。唯一的缺点是您需要在页面加载时加载两个文件而不是一个，但它们会小很多。