使用 webpack 代码拆分，如何加载块和 HTML 布局？

Posted 2023-02-22

【中文标题】使用 webpack 代码拆分，如何加载块和 HTML 布局？

【英文标题】：using webpack code splitting, how to load chunks and HTML layout?

【发布时间】：2016-02-11 21:49:12

【问题描述】：

我使用 webpack 构建块，按需加载（代码拆分）；每个块都将 React 组件渲染为 DOM 元素（div）。我需要 html 来创建这些 div：我应该如何以及何时加载相应的 HTML？我应该如何按需加载块？

我使用 jQuery 的 load 函数从容器 divs 中的文件插入 HTML。此外，我放置了一个<script> 标签来告诉应该加载哪个块，但与我的应用程序代码的其余部分相比，我发现它很笨拙而且一点也不优雅。

有没有更简单的方法来做到这一点？

【问题讨论】：

你说的是服务器端渲染的 html 吗？我认为通常情况下，与 lib 代码相比，您的组件将添加的几千字节代码不值得分成块。你看到大小有很大的不同吗？

不同之处在于加载时间，在客户端：部分应用仅按需加载。但这并没有太大的区别，我同意 - 至少在我的情况下

【参考方案1】：

原来我想要实现的可以通过react-router来实现，只是我不知道；）

<Route name="app" component=require('./app.jsx')>
    <Route path="/" name="home" component=require('./homepage-container.jsx')/>
    <Route path="/otherpath" name="other" component=require('./other.jsx')/>
    ... add as many routes as wanted
</Route>

jsx 文件按需加载，无需纯 HTML 当我使用反应时，设计是每个部分都是一个组件。 在此示例中，激活指向#/otherpath 的链接就足够了 将other 组件作为上层组件的子组件加载（路由称为app）。

【参考方案2】：

您应该使用require.ensure 进行动态路由加载。更好的是，如果您将项目设置为使用 Webpack 2 + Tree Shaking，则可以使用 System.import。

方法如下：

import App from 'containers/App';
function errorLoading(err) 
  console.error('Dynamic page loading failed', err);

function loadRoute(cb) 
  return (module) => cb(null, module.default);

export default 
  component: App,
  childRoutes: [
    
      path: '/',
      getComponent(location, cb) 
        System.import('pages/Home')
          .then(loadRoute(cb))
          .catch(errorLoading);
      
    ,
    
      path: 'blog',
      getComponent(location, cb) 
        System.import('pages/Blog')
          .then(loadRoute(cb))
          .catch(errorLoading);
      
    
  ]
;

您可以在这篇博文中获得完整指南：Automatic Code Splitting for React Router