网站性能优化 -- 简化并压缩文件
有两种有用的技术可以用来提高你的网页的性能:
- 简化代码 – Minify
- 数据压缩 - Compress
结合这两种技术可以减少负载大小，进而提高页面加载时间。
例子
如果在页面上检测到任何可以缩小的CSS或JS资源，Lighthouse将显示一个失败的审计。
它还审计任何未压缩的资产。
简化代码
缩小是删除空白和任何代码的过程，这些代码对于创建更小但完全有效的代码文件来说是不必要的。Terser是一个流行的JavaScript压缩工具，webpack v4默认包含了一个用于该库的插件，用于创建迷你构建文件。
- 如果您正在使用webpack v4或更大的版本，那么您应该可以不用做任何额外的工作。
- 如果你使用的是旧版本的webpack，请安装并包含
TerserWebpackPlugin进入你的webpack配置设置。按照文档了解如何操作。 - 如果您没有使用模块绑定器，请使用
要简洁作为CLI工具，或者直接将其作为应用程序的依赖项。项目文档提供了说明。
数据压缩
压缩是使用压缩算法修改数据的过程。Gzip是服务器和客户端交互中使用最广泛的压缩格式。Brotli是一种较新的压缩算法，它可以提供比Gzip更好的压缩结果。
压缩文件可以显著提高网页的性能，但你很少需要自己做这件事。许多托管平台、cdn和反向代理服务器要么默认使用压缩对资产进行编码，要么允许您轻松地配置它们。在尝试推出自己的解决方案之前，请阅读所使用工具的文档，以了解是否已经支持压缩。
有两种不同的方法来压缩发送到浏览器的文件:
- 动态
- 静态
这两种方法都有各自的优点和缺点，将在下一节中介绍。使用最适合您的应用程序的。
动态压缩
这个过程包括在浏览器请求时动态压缩资源。这可能比手动压缩或使用构建过程压缩文件更简单，但如果使用高压缩级别，可能会导致延迟。
Express是Node的一个流行的web框架，提供了一个压缩中间件库。使用它来压缩任何被请求的资产。下面是一个正确使用它的整个服务器文件的例子:
这压缩了您的资产使用gzip． 如果您的web服务器支持它，可以考虑使用一个单独的模块，如shrink-ray通过Brotli压缩，以获得更好的压缩比。
静态压缩
静态压缩涉及提前压缩和节省资产。这可能会使构建过程花费更长的时间，特别是在使用高压缩级别时，但可以确保浏览器获取压缩资源时不会发生延迟。
如果你的web服务器支持Brotli，使用BrotliWebpackPlugin插件来压缩你的资产，作为构建步骤的一部分。否则，使用CompressionPlugin压缩你的资产与gzip。它可以像任何其他插件一样包含在webpack配置文件中:
一旦压缩文件成为build文件夹的一部分，在服务器中创建一个路由来处理所有JS端点来服务压缩文件。下面是一个使用Node和Express实现gzip资产的示例。
Const express = require('express');Const app = express();App.get ('*.js'， (req, res, next) => {req. js;url =点播。url + . gz的;res.set(“内容编码”、“gzip”);next ();})；