优化 Web 应用程序性能的 9 个简单步骤

这篇文章最初发布在我公司的网站上：链接

随着浏览器越来越先进，支持各种新技术，Web 应用也越来越支持丰富的内容，关注 Web 应用的性能变得越来越重要。这些 Web 应用包括单页应用程序（又称 SPA）和传统的服务器端渲染 Web 应用。

在本文中，我们将介绍一些可以提高 Web 应用程序性能的步骤。

删除重复的 JavaScript 和 CSS

加载重复的 JS 和 CSS 文件有很多弊端。首先，会增加网络请求数量，导致网站加载速度变慢。其次，某些脚本可能会发生冲突，导致意外行为。最后，Google 可能会在搜索结果中惩罚该网站。

因此，请始终确保您加载的所有 JS 和 CSS 文件都没有重复。

压缩 JavaScript 和 CSS

与其按原样提供 JavaScript 和 CSS 文件，不如使用自动化工具来压缩它们。它会删除所有不必要的注释和空格，从而缩小文件大小。这意味着传输的数据更少，带宽占用也更低。

有多种工具可用，例如 minifyjs、js compress 等。像 webpack 这样的打包工具默认配置为在生产构建时最小化文件。

使用 gzip 压缩组件

我们可以对上面提到的观点做进一步的改进。输入gzip。

gzip 是一种快速压缩和解压缩数据的技术。服务器可以通过网络发送经过 gzip 压缩的数据，浏览器收到后会进行解压缩。

它可以将文件大小减少高达 60%。例如，如果您正常加载一个 500KB 的 JS 文件，使用 gzip 压缩后，网络传输大小将只有 300KB。根据您提供的脚本和 CSS 数量，实际大小可能会比较大。如果您加载大量 JS 和 CSS 文件，性能将得到显著提升。例如，在 WordPress 网站上使用多个插件时。

将脚本放在底部

如果您将脚本放在文档顶部（即 head 部分），则下面的文档将无法加载，因为浏览器会等待所有脚本先加载完毕。这会导致您的网站页面看起来空空如也。但是，如果您将它们放在底部，HTML 文档将优先加载，这样您的用户就不会盯着空白屏幕，网站上的内容也更加丰富。

灯塔

使用 Google 的灯塔之类的工具来识别 Web 应用程序中的瓶颈和需要改进的领域。

Lighthouse 会根据多个参数评估您的网站，并为每个参数生成分数。它还会提供提升分数的建议。结果中还会提及最佳实践。

使用捆绑分析器

这一点尤其与 SPA 相关。由于如今几乎所有应用都有 npm 包，开发者最终会使用大量的 SPA。其中一些包可能包含编写糟糕的代码，并且包体积过大。这些包最终可能会成为应用程序的性能瓶颈。例如，您可能正在使用外部库进行日期格式化或字符串实用程序，而这些库的体积可能很大。

捆绑分析器可以直观地显示应用程序中使用的不同捆绑包/包及其大小。

这可能有助于识别哪些捆绑包很大并且需要进一步细分或需要为其提供替代方案。

摇树

摇树优化 (Tree Shaking)是一种用于消除死代码（又称 DCE）的模式。我们举一个常见的例子。你在项目中使用了 lodash 库。它提供了多种方法用于不同的任务。但在你的项目中，你只使用了其中的一小部分，比如说 50 个方法中的 10 个。在这种情况下，当你构建项目时，整个 lodash 库都已包含在内。这意味着剩下的 40 个方法虽然没有被使用，但仍然在包中。这显然是不必要的，而且会导致包大小增加，从而直接影响应用的加载时间。

为了避免这种情况，你应该只导出代码中使用过的方法。像 webpack 这样的打包工具已经支持这一点。你不需要导入整个 lodash 库，而应该只导入你想使用的方法。这样可以确保 webpack 在构建过程中只包含必要的方法，而忽略其余的方法。

代码拆分

像 webpack 这样的打包工具提供了非常强大的功能，可以显著提升你的 Web 应用速度。顾名思义，代码拆分是一种将代码拆分成多个小块，而不是将所有代码打包成一个包的方法。这些小块会根据用户访问的页面动态加载。

上图来自一个真实项目，你可以看到所有不同的块。只有特定于页面的块才会加载，从而加快页面加载速度。

优化图像

根据用例，大尺寸图片可能会对网站的性能产生负面影响。以一个电商网站为例，其产品以网格形式展示。每件产品都有一张图片和一段描述，点击产品会将用户带到产品详情页面，该页面会显示产品的全尺寸图片。如果产品图片尺寸过大，网格页面的加载时间可能会很长，从而导致用户体验不佳。

这个问题很容易解决。你需要做的就是在上传图片时创建、压缩并存储多种尺寸。例如，尺寸可以是：缩略图、小图、中图、大图和原始图。根据上下文和页面，可以使用合适的图片。

感谢您的阅读！