Question

我最近一直在使用React，并开始尝试将Webpack整合到我的工作流程中。但是，我试图更多地了解该工具（遗憾的是，文档并不能很好地解释不同方面的含义）。

从较高层面来说，我了解Webpack允许您创建捆绑的JavaScript文件，以便您可以在多个文件中编写代码，但是在HTML中将1个文件加载到脚本标记中。 webpack中的块是什么以及它与捆绑过程有什么关系？

此外， webpack一直被吹捧为能够进行代码拆分 - 这究竟是什么意思，你们可以提供一个例子吗？

Answer 1

＆＃34;大块＆＃34;从某种意义上说，代码的一部分是根据服务器的要求获得的。因此，您可以拥有一个加载网站的主要交付项，但在用户开始浏览时加载其他资源。

实际上，您可以通过定义分割点来实现此目的。这告诉webpack将在该分割点（即函数）内运行代码路径所需的代码放在其自己的文件中。然后，Webpack会将该拆分块和主文件共有的模块分解出来，并将其放入主文件中，以避免重复供应商代码（换句话说，块可能不会独立）。现在Webpack生成两个文件：主文件和一个额外的块。当块的代码路径被命中时，主文件将从线路中拉出额外的块。从开发人员的角度来看，这一切都发生在require，这使得理由很容易。

最常见的用途之一是块路由器代码。 react-router文档中有working example，但一般的想法是将初始路由加载到主文件中，所有后续或子路由都可以在自己的块中，只有在下载时才会下载用户点击这些路线，提高性能（可能）。示例代码是了解其工作原理的一种很好的方法，因为当您点击路线时，您可以看到文件从线路上拉下来。

无论如何，代码分块是一个很棒的功能。

所有这一切，都要对过早优化保持警惕。它可以扼杀生产力。最好的建议是在没有任何代码分块的情况下运行Webpack，然后在需要性能时添加代码分块（例如，当您注意到站点的某个功能或部分很重但很少使用时）。

PS：如果您有更具体的问题，我很乐意修改此答案。不过，如果您感到好奇，请查看上面的react-router链接。

Answer 2

React Router和Webpack可以很好地协同工作，因为您可以在请求路由时自动分割代码+动态加载块。更好的是，如果您将项目设置为使用Webpack 2（+ Tree shake），则可以使用本机ES6导入和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

Webpack：了解块和代码拆分

2 个答案: