Laucher

2023年 11月 12日

0

减少 JavaScript 以提升网页性能

在现代网站开发中，减少 JavaScript 的使用是至关重要的，也是整体页面效率的关键因素。随着软件工程的发展，对于更快速、更高效的网站以及整体 JavaScript 负载更小的需求一直存在。未使用的 JavaScript 会为你的 Web 应用程序增加不必要的负担，降低整体性能。

本文将介绍一系列模式和技巧，帮助你通过去除未使用的 JavaScript 来减少这种负担，从而节省时间、优化性能并提高效率。

什么是未使用的 JavaScript？

简而言之，未使用的 JavaScript，通常称为死代码，是指你的 Web 应用程序不使用或不需要的任何代码，但存在于你发送到浏览器的最终 JavaScript 捆绑包中。这些死代码处于休眠状态，增加了你的 JavaScript 捆绑包的整体大小，可能影响性能。

为什么会有未使用的代码？

最明显的原因是你可能添加了不再需要的代码，但在最终捆绑包中忘记了删除。这些可能是在应用程序中不再执行、调用或在任何地方不再使用的函数、类或变量。

另一个原因可能是未使用的依赖关系。换句话说，你可能在代码中使用了第三方 JavaScript 依赖关系，但实际上并没有使用。更糟糕的是，这些依赖关系可能有它们自己的未使用 JavaScript，进一步增加了项目中不必要的负担。

移除未使用的 JavaScript

有几种方法可以从 Web 应用程序中删除未使用的 JavaScript。以下是一些建议和模式，将帮助你将更强大、更高效的 JavaScript 捆绑包发送到 Web，无论你是使用纯 JavaScript 还是任何专用库或框架，如 React、SolidJS 或 Vue.js。

代码拆分

代码拆分是一种将 JavaScript 代码拆分为更小、更易管理的块的技术。然后，你可以按需或并行网络请求加载这些块，这意味着你不必每次都加载整个 JavaScript 捆绑包，只需加载必要的部分。

想象一下，如果你有一个像下面这样的单一 JavaScript 捆绑包：

<script src="mainbundle.js"></script> <!-- 60kb 文件 -->

你可以将其拆分为较小的块，只有在需要时才能下载：

<script async defer src="chunk1.js"></script> <!-- 30 kb 文件 -->
<script async defer src="chunk2.js"></script> <!-- 30 kb 文件 -->
<script async defer src="chunk3.js"></script> <!-- 30 kb 文件 -->

这种策略减少了初始化和下载 JavaScript 脚本的主线程上的整体网络负载：

如果你使用 Next.js 或 Vue 等 JavaScript 库或框架，你无需手动执行此操作 — 大多数现代 JavaScript 框架默认支持代码拆分。

将一些组件委托为仅在服务器端使用

这有助于框架“智能”地将 JavaScript 进一步拆分成不应与客户端 JavaScript 捆绑在一起的更小块。

许多组织在生产中使用这种策略，这证明了其效率。以下是 Loom 网站中代码拆分的示例：

树摇（Tree Shaking）

树摇是指消除死代码，即应用程序未使用的 JavaScript。许多流行的捆绑工具，如 webpack、Rollup 或 Vite，在构建发送到浏览器的 JavaScript 块时使用了树摇的方法。

为了确保捆绑包中进行树摇，请始终在你的 JavaScript 组件中使用现代 ES6 语法 — 即 import 和 export 语法：

// 默认导入
import Navbar from 'Components'
// 命名导入
import { Navbar } from 'Components'

// 默认导出
export default Navbar
// 命名导出
export { Navbar }

现代 ES6 语法有助于你的捆绑工具识别死代码，类似于 ESLint 指出是否导入了组件，但在任何地方都没有使用。

JavaScript 缩小

捆绑包中的 JavaScript 越少，浏览器下载捆绑包所需的时间就越少。为确保 JavaScript 尽可能轻量，请在发送之前进行缩小。

JavaScript 缩小将修剪代码中不需要的部分，如空格、语法高亮、注释等。这些不必要的片段会以死代码的形式占据捆绑包中的空间。

即使是看起来简单的 JavaScript 代码也可以被压缩和修改。以下是缩小之前的简单 JavaScript 代码示例：

// add 函数
const add = (a, b) => {
    return a + b
}

// 调用 add 函数
add(3, 4)

这是缩小后的代码示例：

const add=(d,a)=>d+a;add(3,4);

想象一下，在大规模捆绑包上进行 JavaScript 缩小会有什么效果！

JavaScript 缩小比你想象的要简单。你可以从许多在线提供的 JavaScript 缩小工具中进行选择，如 Terser、Uglify、babel-minify 等。

异步加载 JavaScript

一个小提示可以显著节省网络带宽的时间是始终异步加载 JavaScript。

你可以通过向你的 JavaScript 脚本添加 async 和 defer 属性来实现这一点。这将自动处理 JavaScript 下载，并且在加载 JavaScript 时不会延迟或阻止 HTML 的解析或渲染。

async 和 defer 属性以稍微不同的顺序处理 JavaScript 脚本的下载和执行。你可以根据你的项目选择最适合的。

一个async JavaScript脚本的工作方式如下图所示：

同时，一个defer JavaScript脚本是这样工作的：

在许多情况下，同时添加dec和defer可以正确地完成工作。这里有一个例子：

<script async defer src="bundle.js"></script>

动态导入

由于 ES6 模块，纯 JavaScript 中现在可以实现动态导入。当你想有条件地加载 JavaScript 模块或脚本时，这将特别有用。以下是如何编写动态导入的示例：

import('./utility.js')
  .then((module) => {
    // 在这里使用实用程序代码
  })
  .catch((error) => {
    // 捕获错误
  });

这种策略使我们能够在满足特定条件之后请求 JavaScript 捆绑包，而不是在文件顶部导入每个 JavaScript 组件。考虑以下代码片段，其中模块仅在附加事件侦听器后加载：

document.getElementById('dashboard').addEventListener('click', () => {
  import('./utility.js')
    .then((module) => {
      // 使用实用模块 API
      module.callSomeFunction()
    })
     // 在这里捕获意外错误
    .catch((error) => {
      console.error("Oops! An error has occurred");
    });
});

惰性加载

JavaScript 中的惰性加载是一种简单但非常有用的模式。当正确使用时，惰性加载可以帮助你节省网络带宽。基本规则是仅加载当前时间所需的 JavaScript 模块。

你可以遵循的一个模式是始终在视口高度上加载 JavaScript。假设你有一个非常庞大的用户列表。你可能不想加载，比如第 300 个用户的信息，因为这些信息在当前视口中既不需要也不可见。

对于这种特定用例，有一些非常出色的库，它们将 JavaScript 模块委托给仅在达到当前视口的特定用户（例如第 300 个用户）时才加载。

惰性加载不仅限于列表。例如，图像、视频、大量节点等资源也可以进行惰性加载。例如，在浏览器下载实际图像及其相关 JavaScript 之前，你可以放置一个占位符。

这些模式不仅帮助你减少 JavaScript 代码的发送，还极大地改善了用户体验。

检查库是否已弃用

随着 JavaScript 生态系统的不断改进，你的代码和所使用的库应该跟上任何变化。这将有助于使你的代码更加健壮，为将来的发布提供更高的安全性。

如果在代码中使用任何第三方库，请确保始终使用最新版本，并检查它们是否已弃用。许多库，尤其是那些由志愿者维护的小型开源库，可能会过时或意外地被弃用。

在基于 npm 或 Node.js 的开发环境中，你可以运行以下代码来检查库是否已弃用：

npx depcheck

选择轻量级库

你选择的外部依赖项或第三方库可能会影响你发送的 JavaScript 量。始终确保你为项目选择的任何库都在积极维护，使用现代 ECMAScript 版本，最重要的是，它是轻量级的。

你可以使用类似 Bundlephobia 的工具来检查 JavaScript 大小、整体版本和特定库在慢速连接上下载所需时间。你可能会发现，与你目前使用的相比，有一个执行得更好且更轻量的库。

例如，如果使用 Bundlephobia 检查 React，你会发现它非常快速 — 在 4G 连接上仅需 3 毫秒，在慢 3g 连接上为 50 毫秒：

对于每周有数百万次下载的 JavaScript 库来说，这是相当令人印象深刻的。此外，它仅有一个依赖关系，在被缩小后仅有 6kB 多一点。

这使 React 成为在速度、JavaScript 捆绑包大小和可伸缩性方面作为项目外部依赖项的不错选择。

结论

在本文中，我们讨论了八种方法，可帮助你减少 JavaScript 的使用并提高项目的性能。

每个项目都是不同的，具有不同的架构和使用的模式。这里提到的许多技巧对你可能有用，但有些可能不适用。

请根据你和你的项目的实际情况来判断最适合你的是什么。这将使你能够自信地使你的网站和应用程序更加健壮。