umi v4 不支持自定义 splitChunks 吗？

[Enivia]

原项目中配置的 chunks 没有生效

[fz6m]

umi4 默认按页拆包，这近似等同于 umi3 中的 dynamicImport 。

对于特殊场景，可手动进一步拆包：

import { lazy, Suspense } from 'react'

// './Page' 该组件将被自动拆出去
const Page = lazy(() => import('./Page'))

export default function() {
  return (
    <Suspense fallback={<div>loading...</div}>
      <Page />
    </Suspense>
  )
}

[Enivia]

umi4 默认按页拆包，这近似等同于 umi3 中的 dynamicImport 。

对于特殊场景，可手动进一步拆包：

import { lazy, Suspense } from 'react'

// './Page' 该组件将被自动拆出去
const Page = lazy(() => import('./Page'))

export default function() {
  return (
    <Suspense fallback={<div>loading...</div}>
      <Page />
    </Suspense>
  )
}

谢谢分享。但我想 split 的代码并不是组件级或页面级的，比如把所有 styles 打包成一份 css 文件，不借助 splitChunks 无法实现。

[Enivia]

找到了，可以这样自定义 cacheGroups。

  chainWebpack(config) {
    config.optimization.splitChunks.merge({
      cacheGroups: {
        // ...
      },
    });
  },

文档需要补充额。

[fz6m]

自己配置下 codeSplitting ，会自动拆包。

[destinytaoer]

三种自带的拆包策略都试过了，没啥用。公用的第三方库都打包进 umi.js 文件中了。umi 版本是 4.0.73。

[fz6m]

只有符合一定 size 大小的包才会被单独拆分，如果使用次数较多，则会被分配到公用 umi.js 产物中，可以使用 ANALYZE 进行产物分析，另外对于特别大的组件和依赖部分，需要手动拆分，可参见 代码拆分指南 。

如有问题，需要给一个最小复现。

[destinytaoer]

手动拆包只是拆分组件和页面级别的，实际上多页面和组件公共使用的部分还是会在 umi.js 中。我也尝试过的，只有单独被一个页面使用的三方库会被拆解出来，其他类似 antd 这种都会包含在 umi.js 里面。我是想问下有没有可以把 antd 这种大的、多页面和组件公用的三方库拆解出来的方式

[fz6m]

如果公用超过一定次数，就会被包含在 umi.js 中，umi 4 不支持配置分包配置，只能选择内置的 codeSplitting 其中一种分包策略，如有特殊需求，可以把 antd 外置成 umd 格式的 script 作为 external 引入（仅生产）。

[HZZformGD]

...看了很久, 不知道什么时候能支持自定义分包设置, 目前的分包umi4 只能用给定的三种, 而打包后umi.js巨大(对于弱网环境来说), 想把一些不是首屏看到有关的js提取出来放到head里面, 尽可能减少首屏的加载方式, 不知道还有没有别的办法

[fz6m]

对于 umi.js 是公用的内容，无论如何哪个页面都需要加载这个基础库，其中包含了应用所需要的最基本依赖。

第一个因素是因为 react 应用本身就是 200kb （react + react-dom + react-router）起步的，所以 react 应用本来就是默认大的。

第二是近年 ecma 和浏览器支持的新语法快速增长， core-js 的 polyfill 越来越大，由于 umi 是一个面向中后台的框架，主要用于 PC 端，现在企业用户的网速都过剩，加上 cdn 分发、响应缓存、gzip 压缩，所以无需考虑加载缓慢的问题，况且一旦使用 图表、3d 相关的工具库立即就会让应用增长 几 M 、十几 M 产物，所以无需考虑应用产物体积问题，若面向的用户都是现代浏览器，可以通过配置较高的 targets 来减少 core-js 的 polyfill 含量。

另外还可以通过仅在生产环境 external 外置 react 、react-dom 的方式（ umd 外链 ）来单独提取 react 的依赖来减小单 js 的大小。

无论如何，react 应用在全部基础依赖准备完成之前都不会渲染，所以对于有足够网速的用户，除了 10M 以上的 js 文件，普通的资源分不分开 js 的区别不大。

当你需要考虑 toC 和手机端时，这不符合 umi 面向企业中后台用户的方向，若无法承担相关负面影响，则不应该使用 umijs 。

[5201314999]

无论如何，react 应用在全部基础依赖准备完成之前都不会渲染，所以对于有足够网速的用户，除了 10M 以上的 js 文件，普通的资源分不分开 js 的区别不大。

网速有时侯波动 我们850k 的gzip 包还是会让用户感觉白屏很久

[5201314999]

@fz6m


这个时间用户就觉得受不了, umd 外链对版本感觉不太方便，升级的话