缩小和压缩网络有效负载
有两种实用技术可用于提高网页的性能：
- 缩小
- 数据压缩
结合使用这两种技术，可以减少有效负载大小，进而缩短页面加载时间。
测量 #
如果 Lighthouse 在您的页面上检测到任何可以缩小的 CSS 或 JS 资源，则会显示审计失败。
它还会审计任何未压缩的资产。
缩小 #
缩小是删除空格和不需要的代码，从而创建较小但完全有效的代码文件的过程。Terser 是一种流行的 JavaScript 压缩工具，webpack v4 默认为这个库提供一个插件，用于创建缩小的构建文件。
- 如果您使用的是 webpack v4 或更高版本，那么无需任何额外工作就可以直接使用。 👍
- 如果您使用的是旧版 webpack，请安装
TerserWebpackPlugin，并将其包含到您的 webpack 配置设置中。请按照文档中的介绍操作。 - 如果您不使用模块捆绑程序，那么请将
Terser用作 CLI 工具或将其直接包含为您的应用程序的依赖项。项目文档提供了相关说明。
数据压缩 #
压缩是使用压缩算法修改数据的过程。Gzip 是用于服务器和客户端交互的最广泛使用的压缩格式。Brotli 是一种较新的压缩算法，可以提供比 Gzip 更好的压缩结果。
有两种不同的方法可以压缩发送到浏览器的文件：
- 动态压缩
- 静态压缩
这两种方法各有优缺点，下一节将介绍这些方法。请使用最适合您的应用的方法。
动态压缩 #
此过程涉及在浏览器请求时即时压缩资产。这可能比手动或使用构建过程压缩文件更简单，但如果使用高压缩级别会导致延迟。
Express 是一个流行的 Node web 框架，它提供了一个压缩中间件库。使用它来在请求时压缩任何资产。下面列出了正确使用它压缩整个服务器文件的示例：
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
app.use(express.static('public'));
const listener = app.listen(process.env.PORT, function() {
console.log('Your app is listening on port ' + listener.address().port);
});上述代码会使用gzip压缩您的资产。如果您的 web 服务器支持它，请考虑使用一个单独的模块（如shrink-ray）通过 Brotli 进行压缩，以实现更好的压缩率。
静态压缩 #
静态压缩涉及提前压缩和保存资产。这会使构建过程花费更长的时间，尤其是在使用高压缩级别的情况下，但可确保浏览器获取压缩资源时不会出现延迟。
如果您的 web 服务器支持 Brotli，那么请使用 BrotliWebpackPlugin 等插件通过 webpack 压缩您的资产，将其纳入构建步骤。否则，请使用 CompressionPlugin 通过 gzip 压缩您的资产。它可以像 webpack 配置文件中的任何其他插件一样包含在内：
module.exports = {
//...
plugins: [
//...
new CompressionPlugin()
]
}当压缩文件成为构建文件夹的一部分后，去在服务器中创建一个路由来处理所有 JS 端点以提供压缩文件。下面的示例说明了如何使用 Node 和 Express 为使用 gzip 压缩的资产完成此操作。
const express = require('express');
const app = express();
<strong>app.get('*.js', (req, res, next) => {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
next();
});</strong>
app.use(express.static('public'));