基于页面分离JS文件是一种好的实践吗？

Question

例如，我的网站中有三个不同的页面将使用不同的JavaScript代码和一些共同的JavaScript代码。将这些JavaScript代码分别存储到不同的文件中是一个好的做法吗？例如，在A.html中：

<script src="/js/common.js"></script>
<script src="/js/pageA.js"></script>

在B.html中：

<script src="/js/common.js"></script>
<script src="/js/pageB.js"></script>

所以，当我访问A页面时，与B页面相关的js将不会被加载，这样会更快，是吗？我想太多了吗？这不是必要的吗？

还是我应该把所有的js都放在一个文件中？

例如，在每个html文件中：

<script src="/js/main.js"></script>

通常人们怎么做呢？

- Sato

---

通常情况下，由于流水线技术的原因，加载两个50kb的JS文件比加载一个100kb的JS文件更快。对于网站而言，我喜欢使用sitewide.js（通常是一个捆绑包），sectionwide.js和pagespecific.js（如果需要）。 - dandavis

Answer 1

实际上，为每个页面单独分离JS是很明智的。但要记住不要导入过多的JS文件，因为这会增加对服务器的调用次数，从而增加网络流量。但在您的情况下，像

<script src="/js/common.js"></script>
<script src="/js/pageB.js"></script>

真的很好。

未来您可以使用类似Webpack的模块打包工具将common.js和pageB.js打包到一个单独的mainB.js中，mainA.js也是同样的情况。但是您需要决定是否有足够多的文件来使用模块打包工具。

- Ammar Hasan

---

webpack是一个令人愉悦的中间件。 - King Friday

Answer 2

浏览器会缓存外部脚本文件，因此，当用户首次访问您的页面时加载一个较大的文件将导致其余用户的访问无缝进行，这非常好。

在同一页上加载多个 .js 文件会创建不必要的请求，应该避免这种情况。

如果您有一段代码仅在某个页面（或多个页面）上需要，请考虑该代码块的大小；如果它很大，可以将其拆分并添加到需要它的页面上；但是，如果它很小，我建议将所有内容放在一个 .js 文件中。

如果您担心速度问题，可以最小化您的 .js 文件，并在服务器上启用 GZip 压缩。

-

大多数网站源代码中会显示多个脚本；这通常是因为它们要么使用CMS（几乎不关心您的SEO需求），要么使用PHP“包含”，其中嵌入需要自己运行的模块的脚本。

如果可以避免，我建议不要使用多个脚本。

- user6008370

Answer 3

如果您是前端开发的新手，我建议您将js代码分为以下几种类型：

1. 通用工具（com_utils.js）

   小的代码块在全局范围内很有用，例如登录/注销操作、错误处理、通知。您应该在几乎每个文档中加载此js文件。

2. 大型组件模块（modulename.js）

   某些代码对于几个网页（而不是所有页面）非常有用，并且它比较复杂，这意味着它应该是可重用的，那么您需要将其设计为单独的组件，例如编辑器组件、图像上传组件。

3. 不可重用的代码（pagename.js）

   其余的代码是不可重用的或针对特定页面进行定制。然后您可以将js文件命名为pagename.js并在特定页面中加载它。

请注意，这只是一个入门指南，如果您想快速入门，当您在前端开发方面拥有更多经验时，最好学习如何将代码模块化。这也有助于处理代码之间不同的依赖关系。或者，您可以查看第三方工具，例如require.js。

- jilykate

Answer 4

这真的取决于您的应用程序、其大小和目的。

在大型应用程序或单页应用程序（SPA）中，将JS文件分开是常见做法。例如，流行的HTML5框架Ionic按以下顺序分离其文件：

app
-- pages
    -- pageA
        -- pageA.js
        -- pageA.html
    -- pageB
        -- pageB.js
        -- pageB.html
-- etc

这使得你的设置更加模块化，旨在使应用程序代码更易于调试和/或共享/复制。如果您正在开发Web组件或使用TypeScript或ES6之类的东西，那么它也很有用，因为它们具有导出和导入类的选项。

如果页面A不必加载页面B的JS，则可以使页面A加载更快（取决于代码大小）。这也使环境更清洁，因为它更像是一种惰性加载设置（在需要时加载文件，而不是在启动时加载所有内容）。

如果您的项目很小，或者页面之间有许多常见的函数和操作，则可能希望将其全部放在一个文件中。但是，由于您在问题中包含了common.js，我假设这就是您将所有内容保存的地方。

最终，你是开发者！按照自己的喜好编写代码！我个人喜欢保持模块化和分离文件，因为我发现自己经常重用旧代码，从特定文件夹获取它比搜索一个大的JS文件要简单得多。

- Aᴄʜᴇʀᴏɴғᴀɪʟ

Answer 5

通常情况下，您应该将代码分开以提高可读性、可维护性、避免错误和减少JavaScript负载。

此外，如果您的“common.js”很大或是面向对象的，则可以将其进一步拆分为几个文件或目录。请参阅此复杂应用程序的示例：https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Source

如果需要在以后打包和/或压缩JavaScript代码（使其更小），则有像Grunt或Gulp这样的JavaScript构建工具可供使用。

- jjmontes