@rainbowfish/umi-plugin-chunks

@rainbowfish/umi-plugins-chunks

启用方式

安装包后默认注册，如需使用分包功能，需要配置chunks，详情见配置。

介绍

umi 提供了chunks配置，需要使用chainWebpack手动配置optimization，多个项目重复配置不太友好，后续如果修改，全部工程都要改一波。自定义个插件来实现。

使用前后对比

修改前

修改方案

修改后

安装

Using npm:

$ npm install --save-dev @rainbowfish/umi-plugin-chunks

or using yarn:

$ yarn add @rainbowfish/umi-plugin-chunks --dev

配置

扩展 umi 配置文件：

// .umirc or config/config.js 等其他umi支持的配置文件
import { defineConfig } from 'umi';

export default defineConfig({
  /**
   * 需要拆分的模块名称
   * 根据webpack打包分析（ANALYZE=1 umi build） 自行判断哪些需要拆分
   * 建议仅配置一下比较大的包，分包的目的是减少单个包体积，并发加载。
   * 如果分的太多反而影响加载速度
   */
  chunks: ['rc-', '@sentry', '@umijs', 'lodash', 'antd', '@ant-design'],
});

遇到的问题与解决

分包配置后，build 测试正常分包，但是 umi dev 运行，浏览器空白，无报错

配置如下

import { defineConfig } from 'umi';
export default defineConfig({
  chunks: ['rc-', '@sentry', '@umijs', 'lodash', 'antd', '@ant-design'],
});

经过排查，umi.js 是打包后的入口文件，像这样

配置分包后，没有加入'umi'，导致没有入口，什么也不会加载，像这样

这样就清晰了，chunks 中增加'umi'即可，这也是默认值

所以开发插件时，做了处理，配置了 chunks，如果数组中没有 umi，则会自动加入，只需配置需要的分包模块即可。😁

import { defineConfig } from 'umi';
export default defineConfig({
  // 增加入口 'umi'
  chunks: ['rc-', '@sentry', '@umijs', 'lodash', 'antd', '@ant-design', 'umi'],
});

分包报错 chunk of xxx not found

刚开始配置时，遇到下图这样的报错，经过排查，是因为配置的chunks和cacheGroups中的配置不对应，像图中这个报错，就是chunks配置了dva，但是cacheGroups没有对应的处理，可见配置时需要一一对应，多个项目配置繁琐、易错，这也是开发这个插件的原因。😺

·