如何有效利用 Umi JS 的 CDN 功能来提升应用性能？

UmiJS 是一个现代化的前端框架，旨在提供开箱即用的路由、状态管理、构建优化等功能，在实际应用中，CDN（Content Delivery Network，内容分发网络）可以显著提高静态资源的加载速度和用户体验，本文将详细探讨 UmiJS 与 CDN 的结合使用，包括相关配置和优化策略。

一、理解 UmiJS 与 CDN 的结合

UmiJS 简介

UmiJS 是基于 React 和 Webpack 的前端开发框架，提供了丰富的插件系统和便捷的配置方式，适用于各种规模的项目，其核心特性包括：

路由管理：支持多种路由模式，如 hash 路由和浏览器 history 路由。

状态管理：内置 dva，提供模型驱动的开发模式。

构建优化：支持代码分割、懒加载等技术，优化打包体积和加载速度。

CDN 的作用

CDN 通过在全球分布的边缘服务器缓存静态资源，使用户能够从最近的服务器获取资源，从而提高访问速度和稳定性，其主要优势包括：

加速资源加载：减少延迟，提高页面加载速度。

减轻源站压力：分散流量，降低源站负载。

提高可用性：通过冗余机制，提高服务的可靠性。

二、UmiJS 项目中的 CDN 配置

配置 publicPath

当静态资源位于非根目录或 CDN 时，需要配置publicPath 来指向资源路径。

// .umirc.ts 或 config/config.ts
export default {
  publicPath: 'https://yourcdn.com/path/to/static/',
};

对于需要在 HTML 中动态设置publicPath 的场景，可以通过配置runtimePublicPath：

export default {
  runtimePublicPath: true,
};

然后在 HTML 模板中输出：

<script> window.publicPath = <%= YOUR_PUBLIC_PATH %></script>

配置 externals

为了减少打包体积，可以使用externals 配置将某些库从打包产物中排除，并通过 CDN 引入。

// .umirc.ts 或 config/config.ts
export default {
  externals: {
    react: 'window.React',
    'react-dom': 'window.ReactDOM',
  },
  scripts: [
    'https://unpkg.com/react@18.2.0/umd/react.production.min.js',
    'https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js',
  ],
};

使用 CDN 加速静态资源

将静态资源上传到 CDN 后，可以通过修改publicPath 或在 HTML 模板中直接引用 CDN 上的资源 URL。

<link rel="stylesheet" href="https://yourcdn.com/path/to/static/css/style.css">
<script src="https://yourcdn.com/path/to/static/js/app.js"></script>

三、拆包优化与 CDN 结合

分析编译产物结构

在进行拆包优化之前，首先需要了解项目的编译产物结构，可以在package.json 中添加命令：

{
  "scripts": {
    "analyze": "cross-env ANALYZE=1 umi build"
  }
}

然后执行：

npm run analyze

Umi 会分析编译产物并弹出窗口进行图形化展示。

2. 配置 chainWebpack 进行拆包

根据分析结果，可以通过配置chainWebpack 进行拆包优化。

// config/config.ts
export default {
  chainWebpack(config) {
    config.optimization.splitChunks({
      chunks: 'all', // 拆分所有代码块
      minSize: 30000, // 最小尺寸
      minChunks: 1, // 最少引用次数
      maxSize: 0, // 最大尺寸
      automaticNameDelimiter: '.', // 文件名分隔符
      name: true, // 根据模块名自动生成文件名
      maxAsyncRequests: 30, // 最大异步请求数
      maxInitialRequests: 10, // 最大初始请求数
      cacheGroups: {
        vendors: { // 拆分 node_modules 中的依赖
          name: 'vendors',
          test: /[\/]node_modules[\/]/,
          priority: 11,
        },
        reactFileViewer: { // 单独拆分 react-file-viewer
          name: 'reactFileViewer',
          test: /react-file-viewer/,
          priority: 12,
        },
      },
    });
  },
};

注意点

a. 样式丢失问题

如果将某些样式相关的资源从umi.js 文件中隔离出来，需要在外部显式引入这些样式文件。

<link rel="stylesheet" href="https://yourcdn.com/path/to/static/css/antd.css">

b. 单独打包页面的资源加载顺序

在使用模板渲染或外部显式引入资源时，需要考虑资源的加载顺序，确保页面正确渲染。

四、FAQs

Q1: 如何在 UmiJS 项目中使用 CDN？

A1: 在 UmiJS 项目中使用 CDN，可以通过配置publicPath 指向 CDN 上的静态资源路径，或者在 HTML 模板中直接引用 CDN 上的资源 URL，还可以使用externals 配置将某些库从打包产物中排除，通过 CDN 引入。

Q2: UmiJS 如何进行拆包优化？

A2: UmiJS 可以通过配置chainWebpack 进行拆包优化，首先分析编译产物结构，然后根据分析结果配置splitChunks，将代码块拆分为多个小文件，减少主文件大小，提高页面加载速度。

Q3: 使用 CDN 时需要注意哪些问题？

A3: 使用 CDN 时需要注意以下几点：

确保 CDN 上的资源 URL 正确无误。

如果使用了externals，确保在 HTML 模板中正确引入外部资源。

注意资源的加载顺序，避免页面渲染错误。

定期清理 CDN 缓存，确保用户获取到最新的资源。

小编有话说

在 UmiJS 项目中使用 CDN 可以显著提高静态资源的加载速度和用户体验，通过合理配置publicPath、externals 和chainWebpack，可以实现资源的高效管理和优化，需要注意资源的正确引用和加载顺序，以确保页面的稳定性和性能，希望本文能够帮助开发者更好地理解和应用 UmiJS 与 CDN 的结合，提升项目的用户体验。