umi4 分包

[webshi]

我在对 umi.js 进行分包，将 antd 从其中抽离出来，打包的时候 index.html 中并未引入我抽离的 antd.js，而是只有一个 umi.js，umi3 中有 chunks 来解决这个问题，请问 umi4 中该怎么解决呢？

[webshi]

自己找到了一个解决方案，使用插件的 onBuildHtmlComplete 手动将 split 出的 chunk 添加到 index.html 中

[HZZformGD]

哥们,,, 你贴一下example,,文档里的onBuildHtmlComplete 就是一行字,

[webshi]

可以自己写一个 umi plugin 来解决这个问题

1. 首先通过 chunks 来指定你分出来的包
2. 然后在 onBuildHtmlComplete hooks 也就是产物都打包完成后，根据 chunks 指定的 chunk 去 dist 目录中查找到该文件
3. 最终将该文件手动插入到 index.html 中，注意 chunk 插入的顺序

// config/config.ts

export default defineConfig({
  // ...
  plugins: [require.resolve('./plugins/chunks.ts')],
  // 模仿 umi3 中的 chunks 选项
    /**
     * @name 代码拆分
     * @description 该配置项需和 plugins/chunks.ts 插件一起使用
     * @description chunks 数组的顺序决定了 code split 时的优先级(由高到低), 例如这里 antd 的优先级最高, vendors 优先级最低，即最终 script 的顺序是 antd > common > vendors 
     */
  chunks: ['antd', 'common', 'vendors'],
});

// plugins/chunks.ts

import { load } from 'cheerio';
import { readdir, readFile, stat, writeFile } from 'fs';
import path from 'path';
import { promisify } from 'util';
import { IApi } from '@umijs/max';

/**
 * 获取 chunk 的优先级
 *
 * index 为 chunks 的索引
 * length 为 chunks 的长度
 */
const chunkPriority = (index: number, length: number) =>
  Math.abs(index - length) * 10;

export default (api: IApi) => {
  // 描述自定义插件
  api.describe({
    key: 'chunks',
    config: {
      schema(joi) {
        return joi.alternatives().try(joi.array());
      },
      onChange: api.ConfigChangeType.reload,
    },
    enableBy: api.EnableBy.config,
  });

  // 修改 umi 配置
  api.modifyConfig((config) => {
    // 将用户配置的 chunks 添加到最终的配置中
    config.chunks = api.userConfig.chunks;

    // 添加占位符 link, 下方的 onBuildHtmlComplete 会用到该占位符
    // 注意：此占位符 link 最终不会被添加到 index.html 中
    config.links = [...(api.userConfig.links || []), { id: 'placeholder' }];
    return config;
  });

  // code splitting
  api.chainWebpack((config) => {
    if (api.env !== 'production') return;

    const chunks: string[] | undefined = api.config.chunks;

    if (!chunks || !chunks.length) return;

    config.optimization.minimize(true).splitChunks({
      chunks: 'all',
      cacheGroups: chunks
        .map((chunkName, index) => ({
          [chunkName]: {
            name: chunkName,
            test: {
              antd: /[\\/]node_modules[\\/](antd|rc-.+)[\\/]/,
              common:
                /[\\/]node_modules[\\/](react|react-dom|moment|@ant-design|@antv|ahooks|lodash|qs|@fullpage|@umijs|react-intl|axios|dva-core)[\\/]/,
              vendors: ({ resource }: { resource: string }) =>
                /[\\/]node_modules[\\/]/.test(resource),
            }[chunkName],
            priority: chunkPriority(index, chunks.length),
          },
        }))
        .reduce((prev, curr) => ({ ...prev, ...curr })),
    });
  });

  api.onBuildHtmlComplete({
    async fn() {
      // 打包时才将 chunk 添加到 index.html 中
      if (api.env !== 'production') return;

      const chunks: string[] | undefined = api.config.chunks;

      if (!chunks || !chunks.length) return;

      // webpack output 路径
      const distPath = api.paths.absOutputPath;
      // index.html 所在路径
      const htmlPath = path.resolve(distPath, './index.html');

      try {
        // 1. 获取 html 内容
        const html = await readPromise(htmlPath, 'utf-8');

        if (!html) throw new Error('html 内容为空，请重试');

        // 2. 遍历 dist 目录
        const files = await readdirPromise(distPath);

        // 存放 script, 类似 DocumentFragment
        const scripts = load([]).root();

        // 存放 link, 类似 DocumentFragment
        const links = load('', { xmlMode: true }).root();

        for (const filename of files) {
          const filedir = path.resolve(distPath, filename);
          const stats = await statPromise(filedir);

          // 排除目录
          if (stats.isFile()) {
            const targetChunk = chunks.some((chunk) =>
              filename.startsWith(chunk),
            );

            if (!targetChunk) continue;

            const fileExtension = path.extname(filename);

            if (fileExtension === '.js') {
              // 插入 script 和 link
              scripts.append(`<script src=/${filename}></script>`);
            }

            if (fileExtension === '.css') {
              links.append(`<link rel="stylesheet" href=/${filename} />`);
            }
          }
        }

        // 3. 加载 html
        const $ = load(html);

        $('#root').after(scripts.html()!);
        $('link#placeholder').after(links.html()!);
        // 移除 link 占位符
        $('link#placeholder').remove();

        // 4. 输出 html
        const newHTML = $.html();
        if (!newHTML) throw new Error('chunk 插入失败，请重试');

        // 5. 覆盖原 html
        writePromise(htmlPath, newHTML, 'utf-8');
        console.log('代码拆分成功！');
      } catch (e) {
        console.error('代码拆分错误，请重试！');
        throw e;
      }
    },
  });
}

[HZZformGD]

先直接一波爱你 @webshi

[HZZformGD]

突然发现一个问题,, 好像这样只是在umi4 强制给定打包好的分包, 没办法做更自定义的分包策略

[fz6m]

对于需要拆分产物体积的需求，首先可以参考 代码拆分指南 使用拆分策略或者手动拆分部分含有较大依赖的组件区域，其次可以考虑在生产环境中 umd 外链 external 的形式减少单 js 的体积，这是比较主流绝大部分人的做法。

不建议对现有行为进行 hack 和特殊定制，这可能会引发问题，另可参考 #8513 (reply in thread) 。