减少未使用 JavaScript 代码的 8 个技巧
减少未使用或者正在使用的 JavaScript 代码是现代 Web 开发者的一个必备技能，也是提升页面加载速度的一个关键因素。
随着软件工程的发展，人们总是希望网站速度更快、效率更高、JavaScript 有效载荷更小。未使用的 JavaScript 会给 Web 应用程序增加不必要的负担，并降低整体性能。
在本文中，您将了解到一系列模式和技巧，这些模式和技巧可用于通过删除未使用的 JavaScript 来减少这种臃肿，从而帮助您节省时间、优化性能和提高效率。
1.什么是未使用的 JavaScript
简单地说，未使用的 JavaScript（通常称为Dead Code）是指 Web 应用程序不使用或不需要的任何代码，但却存在于您发送给浏览器的最终 JavaScript 包中。这些“僵尸代码”处于休眠状态，会增加 JavaScript 包的整体大小，从而影响页面性能。
造成 JavaScript 程序中未使用代码的原因有很多。最明显的原因是您可能添加了不再需要的代码，但在最终的包中忘记删除它。这些可能是在您的应用程序中不再被执行、调用或使用的函数、类或变量。另一个原因可能是未使用的依赖项。换句话说，您可能在代码中使用了一个您不需要的第三方JavaScript依赖项。更糟糕的是，这些依赖项可能还带有它们自己未使用的JavaScript，进一步增加了项目中不必要的庞杂性。
2.移除未使用的 JavaScript
您可以通过几种方法从 Web 应用程序中移除未使用的 JavaScript。这些提示和模式将帮助您将更强大、更高效的 JavaScript 包发送到页面上，无论您是使用纯 JavaScript 还是任何专用的库或框架，如 React、SolidJS 或 Vue.js。
2.1.Code splitting
代码拆分是一种将 JavaScript 代码拆分为更小、更可管理的模块的技术。然后，您可以按需或并行网络请求加载这些块，这意味着您不必每次都加载整个 JavaScript 包，只需加载必要的部分。
想象一下，您有一个像下面这样的单个JavaScript包：
// 60kb file
<script src="mainbundle.js"></script>
您可以将其分割成小块，只在需要时下载：
<script async defer src="chunk1.js"></script> // 20 kb file
<script async defer src="chunk2.js"></script> // 20 kb file
<script async defer src="chunk3.js"></script> // 20 kb file
这一策略减少了初始化和下载 JavaScript 脚本的主线程的整体网络负载。如果您使用的是 Next.js 或 Vue 等 JavaScript 库或框架，您就不需要手动执行此操作，因为大多数现代 JavaScript 框架都默认支持代码拆分。
不过，您可以将某些组件仅仅给服务器端使用。这有助于框架 "聪明地" 将 JavaScript 分割成更小的块，这些块不应与客户端 JavaScript 块捆绑在一起。许多企业都在生产中使用这种策略，这足以说明它的效率。
2.2.Tree shaking
Tree shaking 是指消除僵尸代码，即应用程序不需要的 JavaScript。许多流行的捆绑程序（如 webpack、Rollup 或 Vite）在构建 JavaScript 块并将其发送到浏览器时，都会使用Tree shaking方法。
为确保捆绑包中的Tree shaking，请始终在 JavaScript 组件中使用现代 ES6 语法，即导入和导出语法：
// default import
import Navbar from 'Components'
// named import
import { Navbar } from 'Components'
// default export
export default Navbar
// named export
export { Navbar }
现代 ES6 语法可帮助您的捆绑程序识别死代码，这与 ESLint 如何指出是否存在导入组件但该组件未在任何地方被使用类似。
2.3.JavaScript minification
捆绑包中的 JavaScript 越少，浏览器下载捆绑包所需的时间就越短。为确保您的 JavaScript 尽可能精简，请务必在发布前将其最小化。
对 JavaScript 进行最小化处理，可以去掉代码中的空白、语法高亮、注释和其他在最终产品构建中不需要的部分。这些不必要的代码段会占用捆绑包中的空间，成为死代码。
即使是看似简单的 JavaScript 代码，也可以进行压缩和修改。下面是一个精简前的简单 JavaScript 代码示例：
// add function
const add = (a, b) => {
return a + b
}
// call add function
add(3, 4)
压缩之后的代码：
const add=(d,a)=>d+a;add(3,4);
想象一下对 JavaScript 进行最小化会对大型捆绑包产生怎样的影响！
JavaScript 压缩比想象中的要容易得多。您可以从 Terser、Ugligy、babel-minify 等许多在线 JavaScript 压缩工具中进行选择。
2.4.Load JavaScript asynchronously
一个可以节省大量网络带宽时间的小窍门是始终异步加载 JavaScript。
其中一种方法是在 JavaScript 脚本中添加 async 和 defer。这将自动处理 JavaScript 的下载，并且在加载 JavaScript 时不会延迟或阻止 HTML 的解析或呈现。
async 和 defer 属性处理 JavaScript 脚本下载和执行的顺序略有不同。您可以选择最适合自己项目的方式。
async JavaScript 脚本的工作原理如图所示：
defer JavaScript 脚本的工作原理如图所示：
在许多情况下，同时添加 async 和 defer 就能正确完成工作。下面是一个如何编写的示例：
<script async defer src="bundle.js"></script>
2.5.Dynamic imports
由于有了 ES6 模块，现在可以在纯 JavaScript 中实现动态导入。当您想按条件地加载 JavaScipt 模块或脚本时，动态导入尤其有用。下面是动态导入的代码示例：
import('./utility.js')
.then((module) => {
// use utility code here
})
.catch((error) => {
// catch errors
});
与在文件顶部导入每个 JavaScript 组件相比，这种策略使我们能够在满足特定条件后请求 JavaScript 捆绑程序。请看下面的代码片段，其中只有在附加事件监听器后才会加载模块：
const $dashboard = document.getElementById('dashboard');
$dashboard.addEventListener('click', () => {
import('./utility.js')
.then((module) => {
// Use utility module APIs
module.callSomeFunction()
})
// catch unexpected error here
.catch((error) => {
console.error("Oops! An error has occurred");
});
});
2.6.Lazy loading
JavaScript 中的懒加载是一种简单但相当有用的模式。如果操作得当，懒加载可以帮助你节省网络带宽。基本规则是只加载当前需要的 JavaScript 模块。
您可以遵循的一种模式是始终按照视口高度加载 JavaScript。假设您有一个非常庞大的用户列表。您可能不想加载第 300 个用户的信息，因为这些信息在当前视口中并不需要，甚至不可见。
针对这种特殊的使用情况，有一些非常出色的库，它们委托 JavaScript 模块仅在指定用户（如第 300 个用户）到达当前视口时加载信息。
懒加载不仅限于列表。图片、视频、大量节点等资产也可以懒加载。例如，你可以在浏览器下载实际图片及其相关 JavaScript 之前放置一个占位符。
这些模式不仅可以帮助您减少 JavaScript 代码，还能极大地改善用户体验。
2.7.检查第三方库的有效性
随着 JavaScript 生态系统的不断完善，您的代码和使用的库也应跟上任何变化。这将有助于使您的代码在未来的版本中更加健壮和安全。
如果您在代码中使用任何第三方库，请确保始终使用最新版本，并检查它们是否已被废弃。许多库，尤其是由志愿者维护的小型开源库，可能会意外过时或被废弃。
在基于 npm 或 Node.js 的开发环境中，您可以运行以下代码来检查库是否被弃用：
npx depcheck
2.8.选择更轻量的库
外部依赖关系或第三方库的选择会影响 JavaScript 的传输量。请务必确保您为项目选择的任何库都得到了积极维护，使用了最新的 ECMAScript 版本，最重要的是，它们都是轻量级的。
总结
在本文中，我们讨论了可以用来减少 JavaScript 的交付量并提高项目性能的八种方法。因每个项目都不尽相同，使用的架构和模式也不尽相同，本文提到的很多技巧对您的项目可能都适用，但有些可能不适用，在使用时需要根据实际环境和情况灵活选择。
大家都在看