代码压缩与烘焙：如何煮出一杯高效的前端代码

性能优化就像煮咖啡，每一步都需要精确控制。代码压缩、资源加载、缓存策略，这些技术如同调整水温、研磨度和冲泡时间，直接影响最终的用户体验。从减少冗余代码到利用现代构建工具，高效的前端代码需要像烘焙咖啡豆一样精心处理。

代码压缩：去掉“咖啡渣”

冗余的代码就像咖啡渣，影响口感却毫无价值。通过工具去除空格、注释和未使用的代码，能显著减少文件体积。例如，使用Terser压缩JavaScript：

// 压缩前
function calculateTotal(price, quantity) {
  // 计算总价
  return price * quantity;
}

// 压缩后
function calculateTotal(n,d){return n*d}

CSS同样可以通过PurgeCSS移除未使用的样式：

/* 压缩前 */
.button { 
  padding: 10px;
  color: blue;
}
.unused-class { /* 从未被引用 */
  margin: 0;
}

/* 压缩后 */
.button{padding:10px;color:blue}

资源加载：控制“水流速度”

资源加载策略决定了用户等待时间。懒加载非关键资源，如同分段注水：

<!-- 图片懒加载 -->
<img data-src="hero.jpg" class="lazyload" alt="...">

<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  document.querySelectorAll('.lazyload').forEach(img => observer.observe(img));
</script>

对于CSS，优先加载关键样式：

<style>
  /* 内联关键CSS */
  .header, .hero { font-display: swap; }
</style>
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">

缓存策略：保温处理

合理的缓存如同咖啡保温，避免重复加热。通过Service Worker实现离线缓存：

// service-worker.js
const CACHE_NAME = 'v1';
const ASSETS = ['/styles/main.css', '/scripts/app.js'];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

HTTP缓存头设置示例：

# Nginx配置
location ~* \.(js|css|png)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

构建优化：精确的“烘焙曲线”

现代构建工具可以像控制烘焙温度一样优化输出。Webpack配置示例：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    },
    runtimeChunk: 'single'
  },
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

Tree-shaking配置确保只打包使用的代码：

// package.json
{
  "sideEffects": ["*.css", "*.global.js"]
}

渲染性能：萃取时间控制

避免强制同步布局，如同避免过度萃取：

// 反例：导致布局抖动
function resizeAll() {
  const boxes = document.querySelectorAll('.box');
  boxes.forEach(box => {
    box.style.width = box.offsetWidth + 10 + 'px';
  });
}

// 正例：使用requestAnimationFrame
function resizeAll() {
  const boxes = document.querySelectorAll('.box');
  requestAnimationFrame(() => {
    const widths = Array.from(boxes).map(box => box.offsetWidth);
    requestAnimationFrame(() => {
      boxes.forEach((box, i) => {
        box.style.width = widths[i] + 10 + 'px';
      });
    });
  });
}

CSS containment优化渲染：

.widget {
  contain: layout paint;
  /* 限制浏览器重排范围 */
}

代码分割：分次冲泡

按需加载代码模块，如同分次注水：

// 动态导入组件
const ProductModal = () => import('./ProductModal.vue');

// React懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));

Webpack的魔法注释实现预加载：

import(/* webpackPrefetch: true */ './charting-library');

性能监控：温度计的作用

实时监控如同咖啡师观察萃取状态：

// 使用Performance API
const perfData = window.performance.timing;
const loadTime = perfData.loadEventEnd - perfData.navigationStart;

// 上报性能指标
navigator.sendBeacon('/analytics', {
  loadTime,
  fps: calculateFPS()
});

function calculateFPS() {
  let lastTime = performance.now();
  let frameCount = 0;
  
  return new Promise(resolve => {
    function checkFPS(time) {
      frameCount++;
      if (time > lastTime + 1000) {
        resolve(Math.round((frameCount * 1000) / (time - lastTime)));
        return;
      }
      requestAnimationFrame(checkFPS);
    }
    requestAnimationFrame(checkFPS);
  });
}

现代API应用：智能咖啡机

新的浏览器API如同专业设备：

// 使用Intersection Observer实现滚动监听
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.card').forEach(card => {
  observer.observe(card);
});

// 使用Web Workers处理密集型任务
const worker = new Worker('image-processor.js');
worker.postMessage(imageData);
worker.onmessage = (e) => updateUI(e.data);

构建时预处理：咖啡豆精选

静态分析能在编译阶段发现问题：

// ESLint性能相关规则
{
  "rules": {
    "react/no-unsafe": "error",
    "no-multiple-empty-lines": ["error", { "max": 1 }],
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

TypeScript类型检查避免运行时错误：

interface Product {
  id: string;
  price: number;
}

function calculateTotal(products: Product[]): number {
  return products.reduce((sum, p) => sum + p.price, 0);
}

资源优化：研磨度调整

图片优化需要根据不同场景处理：

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif"> 
  <img src="image.jpg" alt="...">
</picture>

字体加载策略：

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

运行时优化：冲泡手法

避免内存泄漏如同及时清理咖啡渣：

// 正确的事件监听清理
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
    this.button = document.querySelector('#btn');
  }

  mount() {
    this.button.addEventListener('click', this.handleClick);
  }

  unmount() {
    this.button.removeEventListener('click', this.handleClick);
  }

  handleClick() { /* ... */ }
}

使用虚拟列表优化长列表渲染：

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const App = () => (
  <List
    height={500}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);