在html中加载10MB + bundle.js的最有效方法

Question

在我的项目中，web pack正在生成10 MB +的minified bundle.js，但是当我使用HtmlPlugin在HTML页面中加载整个bundle.js并尝试运行项目时，需要花费大量时间才能登陆主页。我怎样才能让它更快？

Answer 1

您可以使用解决方法来加载或改善应用的性能。

1. 单独的应用程序代码（组件等...）和api代码（反应等...）

您需要将它们分别捆绑为bundle.js和vendor.js。现在使用浏览器缓存，这将确保只加载vendor.js一次。我相信你的大部分代码都只是api代码。这将增加应用程序加载性能，因为只会加载应用程序代码。

2. 利用模块的异步加载。

您可以使用异步加载模块，这将从bundle.js中创建块。当路由或模块需要时，将加载作为js代码段的块。

Answer 2

@Akash如果您在同一个域下有两个独立的应用程序。您需要在项目中启用Webpack Code Splitting。所以它会动态加载bundle。在每种情况下，只要您导航到其中一个应用程序，就只会下载所需的应用程序包。

关于如何在index.html中添加块的问题？

Webpack负责这一点，它在优化中使用runTimeChunk，动态加载相关的bundle。

---

进一步改进包括：

• 您必须启用Webpack Caching - 这将使您的浏览器在捆绑哈希值更改时下载包，否则它将从缓存加载捆绑包（以毫秒为单位）。

我希望这会为您提供有关如何智能优化应用程序的见解。如果您有任何疑问，请告诉我。