高效加载：减少插件静态资源请求的7个技巧

很多插件性能问题其实出在静态资源加载上。分享几个实战中验证过有效的优化手段：

1. 合并小图标为雪碧图

.icon {
  background: url('sprites.png') no-repeat;
}
.icon-home { background-position: 0 0; }
.icon-user { background-position: -32px 0; }
```</p>

<p>2. 用SVG替代部分PNG资源
相比位图可以减小40%-60%体积，特别是线条类图形</p>

<p>3. 按需加载非关键CSS
```javascript
// 首屏渲染后加载辅助样式
window.addEventListener('load', () => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'non-critical.css';
  document.head.appendChild(link);
});
```</p>

<p>4. 静态资源版本号控制
```html
<link href="style.css?v=2024.03" />

5. 使用preconnect预连接CDN

<link rel="preconnect" href="https://cdn.yoursite.com">

6. 内联关键CSS 把首屏渲染必需的样式直接写在head里，避免阻塞渲染

7. 延迟加载第三方JS 特别是统计代码、社交分享按钮等非核心功能