如何减少代码中未使用的 JavaScript？

在构建现代网站时，减少 JavaScript 代码量至关重要。这对于提升页面运行流畅度和整体效率至关重要。

随着软件技术的不断发展，每个人都希望网站运行速度更快、性能更佳，同时减少 JavaScript 占用的空间。如果您有多余的 JavaScript 代码而没有使用，只会让您的 Web 应用变得更大、更慢。

本文将向您展示一些摆脱这些额外 JavaScript 的技巧和窍门，以便您可以节省时间，使您的网站运行得更快，并使事情运行得更顺畅。

什么是未使用的 JavaScript？

简而言之，未使用的 JavaScript（通常称为“死代码”）是指您的 Web 应用中任何未使用或不需要的代码，但它们仍然存在于发送到浏览器的 JavaScript 包中。这些闲置的代码会闲置，导致 JavaScript 包体积增大，进而影响网站的运行。

有几个原因可能导致您的 JavaScript 包中存在未使用的代码。

一个常见的原因是，你在开发过程中添加了代码，但随着项目的进展，最终发现不再需要它们了。不幸的是，你可能会在将最终的 bundle 发送到浏览器时忘记删除它们。这些未使用的代码可能是函数、类或变量，它们只是闲置在那里，在你的应用中没有任何作用。

另一个原因可能是未使用的依赖项。这意味着您在项目中使用了不需要的外部 JavaScript 代码。更糟糕的是，这些外部代码本身可能包含未使用的 JavaScript，从而给您的项目添加了更多不必要的内容。这就像您的网站背负了不必要的额外负担，会降低速度。

删除未使用的代码：

您可以使用一些方法清除 Web 应用中未使用的 JavaScript。这些技巧和窍门将帮助您发送更强大、更高效的 JavaScript 包，无论您使用的是基础 JavaScript 还是特定的库/框架（例如 React、SolidJS 或 Vue.js）。

代码拆分：

代码拆分就像将 JavaScript 代码分解成更小、更易于管理的片段。然后，您可以在需要时加载这些片段，或者一次性加载所有片段，这样您就不必每次都加载整个 JavaScript 包，只需加载您需要的部分即可。

想象一下只有一个 JavaScript 包，看起来像这样：

<script src="main.js"></script> // 100kb file

您可以将其拆分成更小的块，仅在需要时下载：

<script async defer src="chunk1.js"></script> // 30 kb file
<script async defer src="chunk2.js"></script> // 30 kb file
<script async defer src="chunk3.js"></script> // 30 kb file

这种方法减轻了主线程上的整体网络负载，主线程负责启动和获取 JavaScript 脚本：

如果您正在使用 JavaScript 库或框架（例如 Next.js 或 Vue），则无需自己执行此操作 - 许多现代 JavaScript 框架会自动处理代码拆分。

但是，您可以将某些组件指定为仅供服务器端使用。这有助于框架智能地将 JavaScript 分解为更小的部分，而无需与客户端 JavaScript 块捆绑在一起。

许多组织在实际场景中都采用了这种策略，证明了它的有效性。让我们以 React 网站上的代码拆分为例，看一下它的工作原理：

摇树：

摇树优化 (Tree Shaking) 旨在去除无用代码，也就是删除应用中不需要的 JavaScript 代码。当你将 JavaScript 代码块组合起来发送到浏览器时，Webpack、Rollup 或 Vite 等许多流行的打包工具都会使用摇树优化技术，以确保只有必要的代码才能被打包到一起。

为了确保你的 bundle 中的 tree shake 功能能够正常工作，请在 JavaScript 组件中坚持使用现代 ES6 语法。这意味着要使用 import 和 export 语法。

// default import
import Header from 'Components'
// named import
import { Header } from 'Components'

// default export
export default Header
// named export
export { Header }

现代 ES6 语法可帮助您的捆绑器发现死代码，就像 ESLint 发出信号指示是否存在未在任何地方使用的导入组件一样。

JavaScript修改：

打包时 JavaScript 代码越少，浏览器的下载速度就越快。为了尽可能压缩 JavaScript 文件，请务必在发送前进行最小化处理。

压缩 JavaScript 代码包括删除不必要的元素，例如空格、语法高亮、注释以及其他对最终生产版本不必要的代码部分。这些多余的代码可能会导致软件包因未使用的代码而变得臃肿。

即使看似简单的 JavaScript 代码也可以进行压缩和调整。以下是压缩前的基本 JavaScript 代码示例：

// multiply function
const multiply = (a, b) => {
   return a * b
}

// call multiply function
multiply(3, 4)

缩小后的代码如下所示：

const multiply = (a, b) => a * b;
multiply(3, 4);

想想缩小 JavaScript 会对大量捆绑包产生什么影响！

压缩 JavaScript 代码比你想象的要简单。市面上有各种各样的 JavaScript 压缩工具，例如 Terser、Uglify、babel-minify 等等，你可以选择。

异步加载 JavaScript：

这里有一个方便的技巧，可以为您节省大量网络带宽时间：始终异步加载 JavaScript。

您可以通过在 JavaScript 脚本中添加“async”和“defer”来实现这一点。这可以确保 JavaScript 的下载不会在 JavaScript 加载过程中阻碍或阻止 HTML 的解析或显示。

“async”和“defer”都用于管理 JavaScript 脚本的下载和执行，但它们的执行顺序略有不同。您可以根据项目需求选择最合适的方式。

异步 JavaScript 脚本的工作原理如下图所示：

同时，延迟 JavaScript 脚本的工作方式如下：

很多情况下，同时使用 async 和 defer 就能很好地解决问题。以下是示例：

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

动态导入

现在，使用纯 JavaScript 中的 ES6 模块，您可以实现动态导入。当您需要根据特定条件加载 JavaScript 模块或脚本时，动态导入会非常方便。以下是动态导入的编写方法：

import('./helper.js')
  .then((module) => {
    // use helper code here
  })
  .catch((error) => {
    // catch errors
});

这种方法让我们能够在满足特定条件后请求 JavaScript 包，而不是在文件开头就导入每个 JavaScript 组件。查看以下代码片段，其中模块仅在附加事件监听器后加载：

document.getElementById('dashboard').addEventListener('click', () => {

  import('./helper.js')

    .then((module) => {

      // Use helper module APIs

      module.callSomeFunction();

    })

    // catch unexpected error here

    .catch((error) => {

      console.error("Oops! An error has occurred");

    });

});

延迟加载技术

JavaScript 中的延迟加载是一种简单却非常实用的技术。如果使用得当，它可以节省网络带宽。其基本思想是只加载当前需要的 JavaScript 模块。

一个巧妙的技巧是根据视口的高度加载 JavaScript。假设你有一个非常长的用户列表。如果当前屏幕上看不到第 430 个用户的详细信息，那么加载这些信息就毫无意义了。

一些很酷的库可以解决这个问题。它们确保你的 JavaScript 模块仅在特定用户（例如第 430 位用户）出现在屏幕上时加载。

你猜怎么着？延迟加载不仅适用于列表。它也适用于其他内容，例如图像、视频、一堆节点等等。例如，你可以先显示一个占位符，然后浏览器再下载实际图像及其相关的 JavaScript。

这些技巧不仅有助于发送更少的 JavaScript 代码，而且还可以使用户体验更好。

结论

在本文中，我们介绍了六种发送更少 JavaScript 并提高项目性能的技术。

请记住，每个项目都有其独特的架构和模式。虽然我们讨论的许多技巧应该会有所帮助，但并非所有技巧都适合您的具体情况。

相信你的直觉，找到最适合你和你的项目的方法。这样，你就能满怀信心地打造更强大的网站和应用。

我是 Syket Bhattachergee，CreoWis 软件工程师，YouTube内容创作者。如果您想讨论您的技术写作需求或任何职位，您可以通过LinkedIn联系我，并在GitHub上关注我的工作。