Repository navigation
perf: shrink the shipped CSS - #338
Merged
Merged
Conversation
esm/index.css and cjs/index.css shrink from 903 KB to 741 KB. 🤖 Generated with Claude Code
Their per-component style imports compiled without the mll-ant prefix and added a second, unprefixed copy of the base, grid, button, tag and date-picker styles that no component renders. src/antd.less already covers them with the prefix. esm/index.css, minified: 740,843 → 590,687 bytes, gzip 85.0 → 68.8 KB. 🤖 Generated with Claude Code
|
🎉 This PR is included in version 21.0.1-alpha.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
mic-web
approved these changes
Oct 29, 2026
mic-web
approved these changes
Oct 30, 2026
github-actions Bot
pushed a commit
that referenced
this pull request
Oct 30, 2026
## [21.0.1](v21.0.0...v21.0.1) (2026-10-30) ### Performance Improvements * shrink the shipped CSS ([#338](#338)) ([c95153b](c95153b))
|
🎉 This PR is included in version 21.0.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The library ships
index.cssunminified, with a second, unprefixed copy of some antd 4 styles.Consumers that inline it as a JavaScript string, such as through style-loader, ship all of it.
esm/index.cssThe unprefixed copy styles no component of the library
GridandDatePickerimportedantd/es/grid/style/indexandantd/es/date-picker/style/index.rollup-plugin-stylescompiled those without the@ant-prefix: mll-antofsrc/antd.less, so they emitted.ant-row,.ant-btn,.ant-tagand a second copy of antd's base styles.ProvidersetsprefixCls: 'mll-ant', so components render onlymll-ant-classes.src/antd.lesscovers the same components with the prefix:.mll-ant-col-8,.mll-ant-row,.mll-ant-picker,.mll-ant-btnand.mll-ant-tagall remain.A consumer that still runs antd 3 got these rules on its own
.ant-elements.Removing them can change how such a consumer looks, so the alpha below gets a visual check there.
The copy also carried antd's base styles in the default theme, after the compact ones.
They set
bodytofont-size: 14px; line-height: 1.5715, so Storybook and consumers that leavebodyto the library now get the compact12px; 1.337.cssnano keeps every @Keyframes, @media and !important declaration
Compared before and after minifying:
@keyframesand 32@mediain both. Dropping the unprefixed copy then removes 5@mediaof its grid.!importantdeclaration stays. The count drops from 101 to 95 only because cssnano merges identical rules and shortens values, such asrgba(0, 0, 0, 0.85)→rgba(0,0,0,.85).url('#linearGradient-1')of the Empty image stays as written.A per-module build would save a consumer that uses most components little, so it stays out
A prototype shipped each module with
preserveModulesand compiled one prefixed stylesheet per antd component, imported by the modules that use it.Measured with webpack 5 in production mode, honoring
sideEffects:ButtononlyIt pays off only for consumers that use a few components.
It would be a major release:
esm/index.cssgoes away, the CSS loads through side-effect imports that need a CSS-capable bundler or a Jest mapper, and antd resolves from the consumer'snode_modules.For agents 🤖: visual check passed, in review by mic-web
minimize: trueinstyles()ofrollup.config.js, then the two style imports removed fromsrc/Grid/index.tsxandsrc/DatePicker/index.tsx. cssnano 5 comes withrollup-plugin-styles4, so no new dependency.21.0.1-alpha.1is published from thealphabranch, reset to this branch. The visual check in a consumer passed: screenshots of 9 pages identical, only inert antd 3 declarations changed. Next: merge.perf:gives a patch release through semantic-release..ant-divider-inner-textand.ant-motion-collapse*, fromantd/dist/antd.lessitself..lessthrough less-loader in.storybook/main.ts, so it showed the unprefixed copy too. Itsbodytext drops from 14px to the compact 12px; components keep their prefixed styles fromsrc/antd.less.yarn buildon the branch writesesm/index.css.per-module-build-prototype. Its side findings, unverified: the source mixesantd/libandantd/esimports, which can yield two copies of the ConfigProvider context, andbabel-plugin-importnever runs on.ts/.tsx.🤖 Generated with Claude Code