umi.js 主chunk 如何拆包

[Freedom-FJ]

我这个使用了 codeSplitting: {
jsStrategy: 'granularChunks',
},
进行拆包，但是拆出来的umi.js 主chunk太大了 但是我用 memo.optimization.splitChunks({ 进行分割没有作用，怎么办，还有就是我有一些包拆出来会白屏，就是页面没有任何报错，就是白屏，之前的3的版本可以设置chunk加载的时机在umijs之前，就可以解决，新版本都没这个配置了怎么办

[fz6m]

貌似你这个并没有多大，才 几十K ，考虑到现代网速和 CDN 缓存，以及 umi 是一个主要面向企业中后台场景的 SPA 框架等背景，如果 umi.js 体积超过了 10 - 20 M 可以开始考虑优化。

具体细节可以参考 #11884 和 代码拆分指南 。

[Freedom-FJ]

但是我们有要求必须首屏加载3秒以内 所以我希望进行这方面的优化工作，还有就是umi.js支持主umi.js加载的时候拆分task吗 发自我的iPhone

…

------------------ 原始邮件 ------------------ 发件人: 咲奈Sakina ***@***.***> 发送时间: 2023年11月29日 19:10 收件人: umijs/umi ***@***.***> 抄送: mjh ***@***.***>, Author ***@***.***> 主题: Re: [umijs/umi] umi.js 主chunk 如何拆包 (Discussion #11914)

[Freedom-FJ]

我这个是悬浮在mtop上 ，实际umi是有400多kb

[fz6m]

umi 是一个 react 的主要面向企业中后台 pc 场景的 SPA 框架，因此会携带相当一部分 esnext 的 polyfill 和框架本身的运行时，同时所有页面共用的库（如 antd 等组件库、react 等）会一起组成共同产物 umi.js ，然后其他页面的 js 会默认自动拆包。

所以 umi.js 默认就是比较大的，特别是 react 应用都是 200K 起步，如果用了组件库则更甚。

当 to C 或 h5 场景，或较高的首屏渲染性能场景要求时，则不建议使用 umi ，推荐使用 nextjs 等支持 SSR 的框架。

[5201314999]

umi4 能否在分包策略的基础上把某些制定库拆成独立的包，例如， react ，react-dom 和 antd

[5201314999]

我把

chainWebpack(config, { env }) {
    config.module.rule('markdown').test(/\.md$/).type('asset/source');
    if (env !== 'production') return;
    const FRAMEWORK_BUNDLES = [
      'react-dom',
      'react',
      // 'core-js',
      // 'regenerator-runtime',
      'history',
      'react-router',
      'react-router-dom',
      'scheduler',
      'antd',
      // TODO
      // add renderer-react
    ];
    config.optimization.splitChunks({
      cacheGroups: {
        default: false,
        defaultVendors: false,
        framework: {
          name: 'framework',
          chunks: 'all',
          test: new RegExp(
            `[\\\\/]node_modules[\\\\/](${FRAMEWORK_BUNDLES.join(`|`)})[\\\\/]`,
          ),
          priority: 40,
          enforce: true,
        },
        component: {
          test: /[\\/]packages[\\/]components[\\/]src[\\/]/,
          name(_module: any, chunks: any) {
            const cryptoName = crypto
              .createHash('sha1')
              .update(
                chunks.reduce((acc: any, chunk: any) => {
                  return acc + chunk.name;
                }, ''),
              )
              .digest('base64')
              // replace `+=/` that may be escaped in the url
              // https://github.com/umijs/umi/issues/9845
              .replace(/\//g, '')
              .replace(/\+/g, '-')
              .replace(/=/g, '_');
            return `dds-components-${cryptoName}`;
          },
          chunks: 'all', // 包含所有类型的 chunk
          priority: 35, // 优先级
          enforce: true, // 强制执行
        },
        lib: {
          test(module: any) {
            return (
              !isModuleCSS(module) &&
              module.size() > 160000 &&
              /node_modules[/\\]/.test(module.identifier())
            );
          },
          name(module: any) {
            const rawRequest =
              module.rawRequest &&
              module.rawRequest.replace(/^@(\w+)[/\\]/, '$1-');
            if (rawRequest) {
              return `${
                // when `require()` a package with relative path,
                // need remove leading `.` and `/`, otherwise will not found `.js` file
                // e.g. require('../../lib/codemirror')
                rawRequest.replace(/\./g, '_').replace(/\//g, '-')
              }-lib`;
            }

            const identifier = module.identifier();
            const trimmedIdentifier = /(?:^|[/\\])node_modules[/\\](.*)/.exec(
              identifier,
            );
            const processedIdentifier =
              trimmedIdentifier &&
              trimmedIdentifier[1].replace(/^@(\w+)[/\\]/, '$1-');

            return `${processedIdentifier || identifier}-lib`;
          },
          priority: 30,
          minChunks: 1,
          reuseExistingChunk: true,
          chunks: 'async',
        },
        shared: {
          name(_module: any, chunks: any) {
            const cryptoName = crypto
              .createHash('sha1')
              .update(
                chunks.reduce((acc: any, chunk: any) => {
                  return acc + chunk.name;
                }, ''),
              )
              .digest('base64')
              // replace `+=/` that may be escaped in the url
              // https://github.com/umijs/umi/issues/9845
              .replace(/\//g, '')
              .replace(/\+/g, '-')
              .replace(/=/g, '_');
            return `shared-${cryptoName}`;
          },
          priority: 10,
          minChunks: 2,
          reuseExistingChunk: true,
          chunks: 'all',
        },
      },
    });
  },

把源码这个搞出来放到umirc.ts 里自己改了