javascript - 分离基于 JavaScript 的插件和配置以提高性能的好方法是什么

Question

我正在开发一个使用越来越多基于 JavaScript 的插件的高流量 Web 应用程序。提高和保持高水平的前端性能是我非常关心的问题。我想重新设计页面中包含插件和特定插件配置的方式。

目前，一些插件被合并到一个整体的 plugins.js 文件中，而其他插件则作为单独的文件加载。配置是在模板文件内的内联脚本 block 中进行的。我相信插件管理正在失控，影响页面加载时间和性能。

我想到了以下方法:在单独的文件中分离插件，然后在单独的文件中编写特定于页面的配置(如分配事件处理程序或附加标签)。然后我打算有一个脚本，可能基于Sprockets ，它在部署时运行并将多个插件与其配置文件合并，然后输出一个文件。

我的输入是:

• plugin1.js
• plugin1.conf.js
• plugin2.js
• plugin2.conf.js

输出将包括特定页面所需的所有文件。

• page1.js = plugin1.js + plugin1.conf.js + ...

考虑到越来越多的人正在编辑配置并不断添加更多插件，我相信这是一个很好的方法。

当然，我打算使用映射将所需的插件与特定模板匹配，以避免下载不必要的 JavaScript。

这是一个合理的方法吗？您认为它有任何问题吗？

有没有其他人解决过这类问题？

Answer 1

小心 page1.js 的浏览器缓存，要么在打包时动态命名它，例如page1-1002231846.js 或确保使用正确的 header 使缓存无效。

不要做太多的变体，而是一般化，浏览器缓存可能会比加载少几 Kb 节省更多时间。

识别大多数页面通用的脚本和模块，并将它们烘焙到 common.js 中

在页面底部放置尽可能多的 javascript，有助于在 javascript 繁重的网站上花费大量的渲染时间 - 这会推迟它们直到其他所有内容都设置好，从而使 DOM 更快速，加载时的用户体验更好。

使用 Chrome Speed Tracer 找出渲染瓶颈。