Modern.js 静态资源内联优化指南

什么是静态资源内联

静态资源内联是一种将图片、字体、CSS 和 JavaScript 等资源直接嵌入到 HTML 或 JavaScript 文件中的技术。不同于传统的外部文件引用方式，内联资源会以 Base64 编码的形式直接存在于代码中。

为什么需要静态资源内联

1. 减少HTTP请求：每个外部资源都需要单独的HTTP请求，内联可以显著减少请求数量
2. 提高首屏性能：关键资源内联可以避免关键渲染路径的阻塞
3. 简化部署：减少需要部署的独立文件数量

Modern.js 的内联策略

Modern.js 提供了智能的自动内联机制：

1. 默认阈值：10KB以下的资源会自动内联
2. 类型区分：可以针对不同类型的资源设置不同的阈值
3. 灵活控制：支持强制内联或强制不内联特定资源

配置内联行为

调整自动内联阈值

export default {
  output: {
    dataUriLimit: {
      image: 5000,    // 图片5KB以下内联
      font: 8000,     // 字体8KB以下内联
      media: 0        // 媒体文件不内联
    }
  }
}

强制内联特定资源

在资源导入时添加 inline 参数：

import logo from './logo.png?inline';

function Header() {
  return <img src={logo} alt="Logo" />;
}

CSS 中的内联：

.header {
  background-image: url('./bg.png?inline');
}

强制不内联特定资源

使用 url 参数确保资源保持独立：

import largeImage from './hero.jpg?url';

高级内联选项

JS 文件内联

将 JavaScript 直接嵌入 HTML：

export default {
  output: {
    enableInlineScripts: true
  }
}

CSS 文件内联

将样式表直接嵌入 HTML：

export default {
  output: {
    enableInlineStyles: true
  }
}

类型声明支持

对于 TypeScript 项目，需要添加类型声明：

// src/global.d.ts
declare module '*?inline' {
  const content: string;
  export default content;
}

declare module '*?url' {
  const content: string;
  export default content;
}

最佳实践建议

1. 关键资源：首屏关键CSS/JS适合内联
2. 小体积资源：图标等小文件优先内联
3. 大文件避免：超过20KB的资源不建议内联
4. 缓存考量：频繁变更的资源不适合内联
5. HTTP/2环境：在HTTP/2下可减少内联使用

性能权衡

内联资源虽然减少了请求数，但会增加：

• HTML文件体积
• 无法利用浏览器缓存
• 重复内联导致代码冗余

应根据实际场景权衡使用，Modern.js 的智能默认配置已经为大多数场景提供了良好的平衡。