🚀 NetShort：Rsbuild + CDN 的“双剑合璧”，让后台飞起来！

奶茶鉴赏专家
579 阅读3分钟

大家好！我们是 NetShort，一家在出海短剧圈小有名气的团队。我们的 App（netshort）曾在 iOS 美区短剧榜单高居前二，也在 Google Play 多地榜单名列前三。

随着业务扩张，我们后台系统就像装了加速器一样飞速发展。ToB 管理后台的需求一波接一波，开发节奏直接拉满！这也对我们的前端工程化、构建效率和上线速度提出了前所未有的挑战。

🕰️ 白屏三秒 = 使用效率断崖式下滑？

你有没有在后台系统点击页面后，屏幕空白，鼠标转圈圈的经历？我们的运营同学对这种“等一等”的体验可是怨念深重。在 ToB 系统中虽然谈不上用户流失，但加载慢意味着工作效率大打折扣、心情也跟着受影响。

我们关注两个关键指标：

  • 首次内容绘制（FCP） ：用户首次看到屏幕上任何内容的时间。
  • 最大内容绘制（LCP） ：主要内容渲染完成的时间。

它俩就像用户体验的“第一印象官”和“主心骨”，跑慢了，用户立刻翻脸！

🧱 重型库“太能吃”，拖慢页面表现

后台系统里我们离不开这些“硬核选手”：

  • 🎨 ECharts：画图界的艺术家。
  • 🏛️ Ant Design Vue：UI 界的建筑大师。
  • 🕒 Dayjs：精准的时间守门员。

但这些工具虽强，体积也“感人”。要是都打包进主 bundle，用户首次访问就像搬家，得扛着一堆大件跑一趟，FCP 和 LCP 自然就慢了。

⚙️ Rsbuild + CDN：性能优化的双剑合璧

这时，登场的是我们后台系统的“性能搭档”：

  • ⚡ Rsbuild：构建界的闪电侠，基于 Rspack，飞快打包！
  • 🌐 CDN（内容分发网络） ：资源传送的“高铁网络”，离用户越近，加载越快。

🎯 为什么让 CDN 来扛大包？

  1. 减负瘦身：主 bundle 更轻了，页面也就更快亮了。
  2. 就近提货：CDN 分布全球，用户像在家门口拿快递，省时！
  3. 缓存加成：浏览器能记住你，下次访问无需重复下载。
  4. 服务器减压：CDN 帮忙抗流量，我们的服务器喘口气。

🛠️ Rsbuild 实战秘籍

🧭 第一步：挑选 CDN 链接

给这些“重型选手”找个 CDN 代理，让他们独立加载：

  • ECharts: https://cdn.jsdelivr.net/npm/echarts@5.x.x/dist/echarts.min.js
  • Ant Design Vue JS: https://cdn.jsdelivr.net/npm/ant-design-vue@4.x.x/dist/antd.min.js
  • Ant Design Vue CSS: https://cdn.jsdelivr.net/npm/ant-design-vue@4.x.x/dist/reset.css
  • Dayjs: https://cdn.jsdelivr.net/npm/dayjs@1.x.x/dayjs.min.js

🧾 第二步：告诉 Rsbuild 别打包他们

在 rsbuild.config.ts 加入外部化配置，就像跟 Rsbuild 说：

“这些大佬 CDN 会带过来，不用你操心啦！”

// rsbuild.config.ts
export default {
  output: {
    externals: {
      'vue': 'Vue',
      'dayjs': 'dayjs',
      'echarts': 'echarts',
      'ant-design-vue': 'antd',
    },
  },
};

🔗 第三步：注入 CDN 链接

用 html.tags 添加 <script> 和 <link>，加载顺序就像排队进场：Vue 先来，Ant Design Vue 后到：

export default {
  html: {
    tags: [
      { tag: 'script', attrs: { src: 'https://cdn.jsdelivr.net/npm/vue@3.x.x/dist/vue.global.prod.js' }, injectTo: 'head' },
      { tag: 'script', attrs: { src: 'https://cdn.jsdelivr.net/npm/ant-design-vue@4.x.x/dist/antd.min.js' }, injectTo: 'head' },
      { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/ant-design-vue@4.x.x/dist/reset.css' }, injectTo: 'head' },
      { tag: 'script', attrs: { src: 'https://cdn.jsdelivr.net/npm/echarts@5.x.x/dist/echarts.min.js' }, injectTo: 'head' },
      { tag: 'script', attrs: { src: 'https://cdn.jsdelivr.net/npm/dayjs@1.x.x/dayjs.min.js' }, injectTo: 'head' },
    ],
  },
};

🛡️ 有备无患：回退和安全机制

🔁 回退方案：CDN 挂了也不怕！

留一份库文件在本地，CDN 出故障时自动加载：

if (typeof window.echarts === 'undefined') {
  console.warn('CDN 加载失败，准备启用本地备份...');
  const script = document.createElement('script');
  script.src = '/local/fallback/echarts.min.js';
  document.body.appendChild(script);
}

🔒 安全封条：SRI 校验

加个哈希签名，确保 CDN 文件没被篡改：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.x.x/dist/echarts.min.js"
        integrity="sha384-这里填真实的哈希值..."
        crossorigin="anonymous"></script>

生成哈希可用 srihash.org，每次版本更新都要同步更新！

🧩 Rsbuild 的隐藏技能

  • 懒加载：页面只加载需要的模块，让首屏轻装上阵。
  • 图片/字体优化：用现代格式和字体策略让页面更轻盈。
  • 关键 CSS 内联：首屏样式直接写进 HTML，提高 FCP。
  • Tree Shaking：自动移除没用的代码，减少体积。

📊 看得见的优化成果

  • 开发者工具：看文件来源和 bundle 大小有没有明显缩减。
  • Lighthouse 报告：性能分数直接告诉你优化效果。
  • WebPageTest：模拟不同地区网络，评估全球加载体验。
  • Rsdoctor：看哪些库真的被 CDN 扛走了。

NetShort 的后台系统借助 Rsbuild + CDN 双剑合璧，页面加载体验飞升。希望这套“轻装快跑”的优化思路，能帮你的网站也一起起飞！

avatar
文章
阅读
粉丝