前端网络性能优化

一、优化打包体积

压缩与混淆代码

使用 Webpack 的 TerserPlugin 插件，自动压缩JavaScript代码。通过移除代码中的注释、空格、换行符，以及缩短变量名，可以显著减少文件体积。

js 复制代码

const TerserPlugin = require('terser-webpack-plugin');
module.exports = { 
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

多目标打包

使用 @babel/preset-env 插件，可以根据目标浏览器自动添加所需的 polyfill。针对不同浏览器打包出不同的兼容性版本，可以减少每个版本中的兼容性代码

js 复制代码

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['> 1%', 'last 2 versions'],
        },
      },
    ],
  ],
};

二、利用压缩技术

nginx服务器中，通过配置启动Gzip压缩

js 复制代码

gzip on;
gzip_types text/plain text/css application/json application/javascript;

三、使用 CDN

通过将静态资源（如JavaScript、CSS和图片等）部署到CDN上，可以减少服务器负载，并提高用户访问网站的响应速度。

四、合理设置缓存

对于除 HTML 外的所有静态资源，可以开启协商缓存。利用构建工具打包产生的文件 hash 值来置换缓存。

协商缓存

服务器在响应头中添加 ETag 和 Last-Modified 字段，浏览器在后续请求中通过 If-None-Match 和 If-Modified-Since 字段进行验证。除 HTML 外的所有静态资源，可以开启协商缓存。利用构建工具打包产生的文件 hash 值来置换缓存。

js 复制代码

ETag:'5d8c72a5edcf8',
Last-Modified:'Wed, 04 Dec 2019 07:04:05 GMT',

ETag 和 Last-Modified 是协商缓存 （也叫对比缓存 ）的核心。它们本身不能避免HTTP请求 ，但能极大减少响应传输的数据量 （通过返回 304）。它们通常与强缓存 （Cache-Control, Expires）配合使用：强缓存过期后，再使用验证器发起条件请求，从而实现性能与准确性的最佳平衡。

| 场景 | 实现方式 | 受益方 |
|--------------------|--------------------------------------------------------|---------------------------------------|---|
| Vue SPA 静态资源 | 配置 Nginx/Apache/CDN，利用其内置的 ETag 功能。 | 用户：加快页面加载速度。服务器：减少带宽。 |
| Vue SSR 页面缓存 | 在 Node.js 服务器（Express/Koa）中使用中间件生成和验证 HTML 的 ETag。 | 服务器：大幅降低渲染压力和 CPU 使用率。 |
| Vue 组件内 API 调用 | API 服务器 为接口响应生成 ETag，客户端库（如 axios）自动处理条件请求。 | 用户：应用交互更流畅。服务器：减少数据库查询和网络传输。 | |

五、启用 HTTP/2

HTTP/2 具有多路复用、头部压缩等特点，可以充分利用带宽传递大量的文件数据。

多路复用

HTTP/2 允许在单个连接上并行传输多个请求和响应，避免了 HTTP/1.1 中的队头阻塞问题。

六、雪碧图与图片优化

对于不使用 HTTP/2 的场景，可以将多个图片合并为雪碧图，以减少文件数量。

七、异步加载 JavaScript

通过 defer** 和 async 属性，可以让页面尽早加载 JavaScript 文件，而不会阻塞 HTML 解析。

defer 与 async

defer：脚本在 HTML 解析完成后执行。
async：脚本在下载完成后立即执行。

八、资源预加载

通过 prefetch 和 preload 属性，可以让页面预先下载可能用到的资源。

prefetch

九、多个静态资源域

对于不使用 HTTP/2 的场景，将相对独立的静态资源分到多个域中保存，可以让浏览器同时开启多个 TCP 连接，并行下载。

多域名策略