javascript - 如何在同一个网页上实现“页面特定的 js”和“较少的 http 请求”

Question

我在我的项目中添加了这么多 js 文件，这有助于使其特定于页面，但我也想减少 http 请求（现在为每个 js 文件调用如此多的 http 请求会导致网站性能）。

标签： javascriptphpjquerycss

Answer 1

有几种方法可以解决这个问题。立即想到的三个是：

• 将您的代码放在一个缩小的文件中，并在为该特定页面调用适当的初始化函数后有一个内联脚本。例如，在page1.js：

  <script src="allthecode.js"></script>
  <script>MyApp.page1Init();</script>
  

• 将您的代码放在一个缩小的文件中，并让代码通过location对象嗅探页面 URL，并分派给适当的初始化函数。

• 将所有通用代码放在一个缩小文件中，每页只有一个缩小文件，其中只有页面特定的代码。例如：

  <script src="allthecode.js"></script>
  <script src="page1.js"></script>
  

请注意，将代码保存在单独的文件中以进行开发通常是一件好事；但是随后您可以使用构建步骤与许多构建工具/任务运行器（Gulp、Grunt、Webpack 等）中的任何一个一起使用，将您的代码组合并缩小为一个或两个文件以供生产使用。