静态资源处理

静态资源处理是前端工程化中不可忽视的一环，涉及图片、字体、样式、脚本等文件的加载、压缩、缓存策略及部署优化。合理的静态资源管理能显著提升页面性能，降低服务器压力，同时减少开发维护成本。

静态资源分类与特点

前端静态资源通常分为以下几类：

1. 媒体资源：包括图片（PNG/JPG/SVG）、视频（MP4/WebM）、音频（MP3/WAV）等二进制文件
2. 样式资源：CSS、SASS/LESS等预处理器文件
3. 脚本资源：JavaScript/TypeScript文件
4. 字体文件：WOFF/WOFF2/TTF等字体格式
5. 文档类：PDF/JSON/XML等文本类资源

这些资源具有共同特点：

• 内容相对固定，不频繁变化
• 可被浏览器缓存
• 需要特定加载策略（如懒加载）
• 多数需要压缩优化

工程化处理核心目标

资源版本控制

通过文件哈希实现长效缓存是常见做法。Webpack配置示例：

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js',
  assetModuleFilename: 'assets/[hash][ext][query]'
}

按需加载

动态导入实现代码分割：

// 使用React.lazy实现组件懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

资源压缩优化

常见优化手段包括：

• 图片转WebP格式
• CSS/JS的Tree Shaking
• 字体子集化
• 雪碧图生成

现代构建工具实践

Webpack资源处理

完整资源配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb以下转base64
          }
        },
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[hash][ext][query]'
        }
      }
    ]
  }
};

Vite的特殊处理

Vite对静态资源有内置优化：

// 显式URL引入
import imgUrl from './img.png?url'
// 作为字符串引入
import imgSrc from './img.png?raw'
// 指定处理方式
import logo from './logo.png?w=200&format=webp'

高级缓存策略

CDN部署配置

典型CDN资源路径规则：

https://cdn.example.com/[项目名]/[环境]/[版本]/static/js/main.abcd1234.js

Service Worker缓存

Workbox配置示例：

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

// 预编译资源
precacheAndRoute(self.__WB_MANIFEST);

// 自定义缓存策略
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 24 * 60 * 60,
      }),
    ],
  })
);

性能监控与优化

资源加载水合图

使用Performance API监控：

const resourceTimings = performance.getEntriesByType('resource');
resourceTimings.forEach(resource => {
  console.log(`${resource.name} 加载耗时: ${resource.duration.toFixed(2)}ms`);
});

关键资源预加载

HTML头部声明：

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="lazy-module.js" as="script">

异常处理机制

资源加载失败处理

全局错误监听示例：

window.addEventListener('error', (event) => {
  if (event.target.tagName === 'IMG') {
    event.target.src = '/fallback-image.png';
    event.target.alt = '加载失败';
  }
}, true);

字体加载降级方案

CSS字体回退策略：

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

body {
  font-family: 'CustomFont', system-ui, sans-serif;
}

微前端场景下的特殊处理

资源共享策略

通过externals避免重复加载：

module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};

子应用资源隔离

CSS作用域隔离示例：

// 使用Shadow DOM
const shadow = document.getElementById('app').attachShadow({ mode: 'open' });
shadow.innerHTML = `
  <style>
    /* 样式仅在该Shadow DOM内生效 */
  </style>
  <div class="app-content"></div>
`;

自动化测试验证

资源完整性校验

使用Jest测试用例：

test('关键资源应小于阈值', () => {
  const bundleStats = require('./dist/stats.json');
  expect(bundleStats.assets['main.js'].size).toBeLessThan(1024 * 500);
  expect(bundleStats.assets['main.css'].size).toBeLessThan(1024 * 50);
});

缓存命中率测试

Puppeteer测试脚本：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 首次加载
  await page.goto('https://example.com');
  const firstLoad = await page.evaluate(() => 
    performance.getEntriesByType('resource')
  );
  
  // 二次加载
  await page.reload();
  const secondLoad = await page.evaluate(() => 
    performance.getEntriesByType('resource')
  );
  
  // 验证缓存命中
  const cachedResources = secondLoad.filter(res => 
    res.duration < firstLoad.find(f => f.name === res.name).duration * 0.1
  );
  console.log(`缓存命中率: ${(cachedResources.length/secondLoad.length*100).toFixed(1)}%`);
  
  await browser.close();
})();