跳到主要内容

12. 冷启动提速 split-router-loader

简介​

split-router-loader 实现原理主要是基于对 umi 的配置式路由文件在 webpack 开发模式下文件 loader 阶段动态生成，以实现按需加载。

用法​

  1. 引入 split-router-loader 代码

飞搭工程的 config/config.dev.ts 引入 split-router-loader 代码。

import { IConfig } from 'umi';
import path from "path"; // ref: https://umijs.org/config/

const config: IConfig = {
  define: {
  // ......
  chainWebpack: (c) => {
    c.module
      .rule('split-router-loader')
      .test(/\.tsx?$/)
      .use('split-router-loader')
      .loader(
        path.join(__dirname,
          '../scripts/loaders/split-router-loader.js'
        )
      )
      .end();
    return c;
  },
};

export default config;

  1. 定义需要拆分的路由

修改飞搭工程的 scripts/loaders/router.js 文件，以 {key:string: values:string[]} 形式维护需要拆分的路由。
例：

const routerModeMap = {
  script: [
    '/hmde/a', // 路由对应的 path（仅识别第一层）
    '/hmde/b',
  ],
  process: [
    '/hmde/c'
  ],
  businessObject: [
    '/hmde/d'
  ]
}

module.exports = {
  routerModeMap,
}
  1. 定义 SPILT_ROUTER 变量

修改飞搭工程的 packages/你的子模块/config/config.dev.ts 文件，添加变量 process.env.SPILT_ROUTER。
例： 

const splitRouters = [
  'script',
  // 'process',
  // 'businessObject',
];

process.env.SPILT_ROUTER = splitRouters.join(',');

以上配置代表启动 script 模块的拆分路由。

支持多个模块的拆分路由组合启动。
例：

const splitRouters = [
  'script',
  'process',
  // 'businessObject',
];

process.env.SPILT_ROUTER = splitRouters.join(',');

以上配置代表启动 script 模块和 process 模块的拆分路由。

如果 SPILT_ROUTER 变量不存在或者为空字符串, 则全量启动子模块。
例:

const splitRouters = [
  // 'script',
  // 'process',
  // 'businessObject',
];

process.env.SPILT_ROUTER = splitRouters.join(',');

以上配置代表完整启动子模块。

此篇维护者:黄振敏