我正在开发一个使用越来越多基于JavaScript的插件的高流量Web应用程序。改善和保持高端的前端性能是我非常关心的问题。我想重新构建页面中包含插件和特定插件配置的方式。
目前，某些插件已合并为单个plugins.js文件，而其他插件则作为单个文件加载。配置在模板文件内的内联脚本块中进行。我相信插件管理失控会影响页面加载时间和性能。
我想到了以下方法：在单个文件中单独插入，然后在单独的文件中编写特定于页面的配置（如分配事件处理程序或附加标记）。然后我打算有一个可能基于Sprockets的脚本，它在部署时运行，并将多个插件与其配置文件合并，然后输出一个文件。
我的意见是：
输出将包含特定页面的所有必需文件。
我认为考虑到更多人正在编辑配置并不断添加更多插件，这是一种很好的方法。
当然，我打算使用地图将所需的插件与特定模板匹配，以避免下载超过必要的JavaScript。
这是一种合理的方法吗？你觉得它有什么问题吗？
还有其他人解决过这类问题吗？
答案 0 :(得分：1)
小心使用page1.js的浏览器缓存，或者在打包时动态命名它。 page1-1002231846.js或确保使用正确的标题使缓存无效。
不要制作太多变体，而不是概括，浏览器缓存可能会比加载少量Kb节省更多时间。
识别大多数页面共有的脚本和模块，并在common.js中将它们一起烘焙
在页面底部放置尽可能多的javascript，有助于在javascript繁重的网站上大量渲染时间 - 这会延迟它们直到其他所有设置，从而导致更快的DOM和更好的用户加载体验。
使用Chrome Speed Tracer找出渲染瓶颈。
答案 1 :(得分：1)
测量当前站点，并确定瓶颈。
希望有些经验丰富的人会提出更有用的答案，但是：
正如一些名叫杰夫阿特伍德的雅虎在他的博客文章The Computer Performance Shell Game中提到的那样，性能优化正在弄清楚哪个资源是瓶颈，并消除了瓶颈。资源是：
通过为每个页面生成不同的JavaScript文件配置，我想您希望保存：
在第二个问题上，通过将整个网站的所有JavaScript放在一个大文件中，可能可以更好地服务。
但是，如果很多用户只点击了您的Web应用程序的一个页面（使用特定的JavaScript子集）并且没有点击其他页面，那么您的配置想法可能会运行良好。
就处理速度而言，我认为较小的文件处理速度比较大的文件要快。你需要衡量这一点，看看你获得了多少好处。您可以通过让每个插件负责检查给定页面上是否需要（例如，通过检查页面上是否存在特定HTML）来获得大致相同的结果，并且仅在此情况下运行。
答案 2 :(得分：0)
我基本上在构建时将它全部组合到
js3rdparty.js包含jQuery和ExtJs。这种情况不太可能随着时间的推移而发生很大变化，并且具有相当大
js3rdpartyplugins.js是我从互联网上获取的所有插件/扩展程序，或者我自己写的这个文件相当小，而且更容易改变。
我只需在configurations.js中为我的所有网页加载所有配置。在我的应用程序中，这归结为加载网格和表单字段配置，但一旦打包和缩小此文件非常小。 bootstrapper.js基本上是所有网站行为的组合脚本（事件监听器，创建控件，动画等）。
我将其拆分的主要原因是允许浏览器缓存最不可能更改的大文件。当我推出新行为或更改某些配置时，它们不会使较大文件的缓存无效。
答案 3 :(得分：0)
你能try this吗？它适用于插件，线程等。