javascript - Webpack:了解 block 和代码拆分

Question

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

在高层次上，我了解到 Webpack 允许您创建一个捆绑的 JavaScript 文件，这样您就可以在多个文件中编写代码，但将 1 个文件加载到您的 HTML 脚本标记中。 什么是 webpack 中的 block ，它与这个打包过程有什么关系？

此外，webpack 被吹捧为能够代码拆分 - 这到底是什么意思，你们能举个例子吗？

Answer 1

“ block ”是代码的一部分，从某种意义上说，它是根据服务器的需要获取的。因此，您可以拥有一个加载网站的主要可交付成果，但在用户开始四处浏览时加载其他资源。

实际上，您可以通过定义分割点来做到这一点。这告诉 webpack 将在该分割点(即函数)内运行代码路径所需的代码放入其自己的文件中。然后 Webpack 将分离出该拆分块和主文件共有的模块，并将其放入主文件中以避免重复 vendor 代码(换句话说，该 block 可能不会独立)。现在 Webpack 生成两个文件:主文件和一个附加 block 。当 block 的代码路径被命中时，主文件将从线路中拉入额外的 block 。从开发人员的 Angular 来看，这一切都是通过 require 发生的，这使得推理变得非常容易。

最常见的用途之一是分块路由器代码。有一个 working example在 react-router 文档中，但一般的想法是将初始路由加载到主文件中，所有后续或子路由都可以在它们自己的 block 中，并且只有在用户点击时才会下载这些路线，提高性能(潜在)。示例代码是理解其工作原理的好方法，因为您可以看到文件在您访问路由时从网络中取出。

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

---

总而言之，要非常小心过早的优化。它会扼杀生产力。最好的建议是在没有任何代码分块的情况下使用 Webpack 运行，然后在需要性能时添加代码分块(例如，当您注意到站点的某个功能或部分很重但很少使用时)。

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