源码优化讲解-编程学习之家

网站做完只是第一步，让它"跑得快、用着爽、改得动"才是真正的工程能力。本教程从代码规范到性能优化、资源压缩到缓存策略，系统讲解源码优化的核心方法。

1. 代码规范

好的代码首先要"可读、可维护"，规范是团队协作的基础。推荐遵循 Airbnb / Standard 等业界规范，并使用工具强制执行。

// 反例：变量名、缩进、分号混乱
var x=10;function calc(a,b){return a*b}

// 正例：清晰的命名与格式
const maxRetry = 10;
function calculateTotal(price, quantity) {
  return price * quantity;
}

推荐配置 ESLint + Prettier + EditorConfig 三件套：

# 安装
npm install -D eslint prettier eslint-config-prettier

# .eslintrc.json 简易配置
{
  "extends": ["eslint:recommended", "prettier"],
  "env": { "browser": true, "es2022": true },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "warn",
    "prefer-const": "error"
  }
}

2. 性能优化目标

性能优化要"用数据说话"，常用核心指标（Core Web Vitals）：

LCP（Largest Contentful Paint）：最大内容渲染时间，建议 < 2.5 秒
FID（First Input Delay）：首次输入延迟，建议 < 100 毫秒
CLS（Cumulative Layout Shift）：累计布局偏移，建议 < 0.1
TTFB（Time To First Byte）：首字节时间，建议 < 600 毫秒

使用 Chrome DevTools 的 Performance 与 Lighthouse 面板可量化测量这些指标。

3. 图片压缩

图片通常占页面体积的 60% 以上，优化图片是性价比最高的提速手段。

# 使用 squoosh / tinypng 在线压缩（保留 70-80% 质量）
# 或命令行工具 imagemin
npm install -g imagemin-cli imagemin-mozjpeg imagemin-pngquant

# 批量压缩 JPG（质量 75）
imagemin src/*.jpg --out-dir=dist --plugin=mozjpeg

# 批量压缩 PNG
imagemin src/*.png --out-dir=dist --plugin=pngquant

格式选择建议：

WebP：现代格式，比 JPG/PNG 小 25-35%，主流浏览器支持
AVIF：更新一代格式，体积更小，兼容性需关注
SVG：图标、Logo 等矢量图首选，无损缩放
JPG：照片类，兼容性最好
PNG：需要透明背景时使用

<!-- HTML 中使用 picture 标签做格式回退 -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero" width="1200" height="600">
</picture>

4. CSS 压缩合并

减少 CSS 文件数量与体积，可显著降低请求次数与解析时间。生产环境务必压缩。

# 使用 cssnano 压缩 CSS
npm install -g cssnano-cli

# 压缩单个文件
cssnano style.css style.min.css

# 多个文件合并并压缩
cat reset.css base.css components.css | cssnano > bundle.min.css

HTML 中引用压缩后的版本：

<link rel="stylesheet" href="bundle.min.css?v=20260803">
<!-- 关键 CSS 内联到 head，加速首屏渲染 -->
<style>body{margin:0;background:#FBF8F1}</style>

加载策略：CSS 默认会阻塞渲染，建议把首屏关键 CSS 内联到 <head>，非关键 CSS 通过 media 异步加载：<link rel="stylesheet" href="print.css" media="print">

5. JS 压缩与异步加载

JavaScript 是阻塞 HTML 解析的，体积大或位置不当会严重拖慢首屏。生产环境必做压缩与按需加载。

# 使用 Terser 压缩 JS
npm install -g terser

# 压缩单个文件
terser app.js -c -m -o app.min.js

# 选项说明：
# -c  压缩：去除空格、删除死代码
# -m  混淆：缩短变量名
# -o  输出文件

加载策略优化：

<!-- 1. defer：HTML 解析完后按顺序执行（推荐）-->
<script src="app.min.js" defer></script>

<!-- 2. async：下载不阻塞，下载完立即执行（适合独立脚本如统计）-->
<script src="analytics.js" async></script>

<!-- 3. module：原生 ES Module，默认 defer 行为 -->
<script type="module" src="app.js"></script>

6. 浏览器缓存策略

合理利用缓存可让回访用户秒开网站。通过 HTTP 响应头控制缓存策略，分为强缓存与协商缓存。

# Nginx 配置静态资源缓存

# 强缓存：1 年内不需请求服务器
location ~* \.(jpg|jpeg|png|gif|svg|webp|css|js|woff2)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML 文件：不缓存或短时缓存
location ~* \.html$ {
  add_header Cache-Control "no-cache";
  # no-cache：会请求服务器验证是否变化
}

缓存策略说明：

强缓存：Cache-Control: max-age=31536000，1 年内直接用本地副本
协商缓存：用 ETag / Last-Modified 询问服务器是否变化，返回 304 则用本地副本
指纹命名：文件名带哈希 app.a3f9c1.js，内容变哈希就变，强制浏览器重新下载

7. CDN 加速

CDN（内容分发网络）把静态资源缓存到全国各地的边缘节点，让用户从最近的节点取数据，大幅降低延迟。

# 静态资源使用 CDN 域名
<link rel="stylesheet" href="https://cdn.pgsr.cn/css/bundle.min.css">
<script src="https://cdn.pgsr.cn/js/app.min.js" defer></script>

# 第三方库使用公共 CDN
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js"></script>

接入 CDN 步骤：

选购 CDN 服务（阿里云、腾讯云、Cloudflare 等）
添加加速域名，回源到你的源站 IP
修改 DNS 解析，将 CDN 域名 CNAME 到 CDN 提供的地址
配置缓存规则、HTTPS 证书、防盗链

8. 懒加载与预加载

懒加载（Lazy Load）让资源在需要时才加载，预加载（Preload）则提前加载关键资源，二者配合使用。

<!-- 图片懒加载：原生 loading="lazy" -->
<img src="photo.jpg" loading="lazy" alt="...">

<!-- 关键资源预加载 -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">

<!-- 下一页资源预取（不紧急）-->
<link rel="prefetch" href="/next-page.html">

JS 懒加载组件（按需加载）：

// 路由级代码分割（以 Vite + Vue 为例）
const routes = [
  {
    path: "/about",
    component: () => import("./views/About.vue")
  }
];

// 通用动态导入
const module = await import("./heavy-module.js");

优化效果验收

做完上述优化后，用 Lighthouse 跑一次评分，重点关注：

Performance 分数应 > 90
LCP < 2.5 秒，CLS < 0.1，FID < 100ms
首屏请求数 < 20，总体积 < 500KB
图片格式是否升级到 WebP/AVIF
静态资源是否启用了 CDN 与长缓存

性能优化是持续过程，建议每次发布后跑一次 Lighthouse 并记录趋势。先抓大放小（图片、JS、缓存），再做精细优化（关键路径、字体、预加载）。

源码优化讲解

源码优化讲解：让网站又快又稳