组织JS代码以获得最佳性能的最佳方法是什么？

Question

我想学习什么是组织JS代码的最佳方法。

在我的应用程序中具有jQuery依赖关系，并且有一些我在特定页面中使用的插件，例如：

第1页需要：

- jquery
- magnific-popup
- autosize
- owl.carousel

第2页需要：

- jquery
- magnific-popup
- autosize
- photoswipe
- verlok
- tinyColorPicker
- ZebraDatePicker
- rangeslider
- dropzonejs

第3页需要：

- jquery
- magnific-popup
- verlok

最好制作一个具有所有依赖项的大型捆绑包并将其加载到所有页面中。

或

在所有页面中导入jQuery并为每个页面创建一个特定的包吗？

或

在每个页面的特定捆绑中包含jQuery，并为每个页面加载一个文件吗？

Answer 1

您可以创建一个包含所有页面都需要的依赖项的捆绑软件（jquery和放大弹出窗口），并为三个页面创建单独的捆绑软件，这三个页面在加载该页面时将异步加载。这将缩短页面加载时间。您要做的另一件事是预取捆绑包。 预取的作用是在空闲时间加载资产。因此，当您加载新页面时，其中的资源将已经加载。

因此，通过这种方法，可以减少初始页面加载时间，并且也可以更快地加载后续页面。

我建议您使用诸如webpack之类的模块捆绑器，这将为您解决这个问题。

Answer 2

通常最好让客户端下载较少的文件，这意味着一个文件会更好。但是，如果您计划频繁更改某些文件（或更新依赖项），最好将这些文件放在单独的捆绑软件中。

您可以看到a more in depth discussion here。