chore: 🤖 distribution unbundled #773
Open
Conversation
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
…into chore/distribution-unbundled
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Why?
The following PR makes the distributed files "unbundled", effectively moving optimisation to a consumer app concern, e.g. obfuscation, compression, bundling MUST be consumer concerns, the library SHOULD NOT make the consumer bundling process more difficult, it MUST facilitate it! It resolves cyclic imports or circular dependencies, enhances linting to prevent imports from barrel files, making the barrel files more of a public API than an internal API to help prevent circular dependencies.
From now on, bundling preserves the file tree, externalises packages based on the package.json dependency declaration automatically, instead of managing them manually as the current version does. It allows deep imports, e.g.
@clickhouse/click-ui/components/Button.Exports files are placed by target resolution, e.g. dist/esm|cjs. It has removed UMD until further notice (why is the original version providing UMD, what's the use-case?). As a component library, in principle, it should be ESM and CJS (due to NodeJS SSR) compatible in the worse case scenarios.
It reduces build times from > 1 minute to < 22 seconds.
More importantly, this initial revision provides tree-shaking support, helping reduce file size. Which can now be assessed with an optional builder feature to analyse and visualise the package dependency graph, file sizes, etc.
How?
Preview?
Circular dependencies
Analysis for the current production version
demo-analytics-visualizer-es.mov
demo-analyzer-visualizer-stats-standard-umd.mov
demo-bundle-analyze-visualize-current-main-is-bad.mov
Analysis for proposed PR version
demo-proposed-pr-pkg-analysis.mov
Docusaurus on current production version
💁♀️ Showing docusaurs since the reason why "bundled" version was introduced was due to "click-ui failure to work in docusaurus"
Docusaurus on PR proposed version
Distribution file size (before)
dist ├── App.d.ts ├── click-ui.bundled.es.js ├── click-ui.bundled.es.js.map ├── click-ui.bundled.umd.js ├── click-ui.bundled.umd.js.map ├── click-ui.es.js ├── click-ui.es.js.map ├── click-ui.umd.js ├── click-ui.umd.js.map ├── clickhouse-backs.png ├── components │ ├── Accordion │ ├── Alert │ ├── AutoComplete │ ├── Avatar │ ├── Badge │ ├── BigStat │ ├── Button │ ├── ButtonGroup │ ├── CardHorizontal │ ├── CardPrimary │ ├── CardPromotion │ ├── CardSecondary │ ├── Checkbox │ ├── CodeBlock │ ├── Collapsible │ ├── ConfirmationDialog │ ├── Container │ ├── ContextMenu │ ├── DateDetails │ ├── DatePicker │ ├── Dialog │ ├── Dropdown │ ├── EllipsisContent │ ├── FileTabs │ ├── FileUpload │ ├── Flyout │ ├── FormContainer │ ├── GenericLabel │ ├── GenericMenu.d.ts │ ├── Grid │ ├── GridContainer │ ├── HoverCard │ ├── Icon │ ├── IconButton │ ├── IconWrapper │ ├── Input │ ├── Label │ ├── Link │ ├── Logos │ ├── MultiAccordion │ ├── Pagination │ ├── Panel │ ├── Popover │ ├── ProgressBar │ ├── RadioGroup │ ├── Select │ ├── Separator │ ├── SidebarCollapsibleItem │ ├── SidebarCollapsibleTitle │ ├── SidebarNavigationItem │ ├── SidebarNavigationTitle │ ├── Spacer │ ├── SplitButton │ ├── Switch │ ├── Table │ ├── Tabs │ ├── Toast │ ├── Tooltip │ ├── Typography │ ├── VerticalStepper │ ├── commonElement.d.ts │ ├── commonTypes.d.ts │ ├── cursorOptions.d.ts │ ├── icons │ ├── index.d.ts │ └── types.d.ts ├── examples │ └── GridExample.d.ts ├── favicon.ico ├── hooks │ ├── index.d.ts │ └── useUpdateEffect.d.ts ├── index.d.ts ├── lib │ ├── EventEmitter.d.ts │ └── getTextFromNodes.d.ts ├── logo.svg ├── main.d.ts ├── theme │ ├── ClickUIProvider │ ├── index.d.ts │ ├── theme.d.ts │ └── tokens └── utils ├── date.d.ts ├── mergeRefs.d.ts ├── test-utils.d.ts └── truncate.d.ts 69 directories, 31 filesDistribution file size (after)
dist ├── cjs │ ├── components │ ├── hooks │ ├── index.cjs │ ├── index.cjs.map │ ├── lib │ ├── theme │ └── utils ├── esm │ ├── components │ ├── hooks │ ├── index.js │ ├── index.js.map │ ├── lib │ ├── theme │ └── utils └── types ├── components ├── hooks ├── index.d.ts ├── lib ├── theme └── utils 19 directories, 5 filesBuild times
On a macOS ventura m2 max pro:
Current production version >= 1 minute
PR proposed version <= 22s