Barrel files are bad for Vite dev server performance (and probably bad for code splitting too if we were doing more of it — and we intend to). We should get rid of them, starting with the biggest ones. It should be a noisy but very mechanical change. I think this also means getting rid of @oxide/ui and friends in favor of normal direct imports from, e.g., ~/libs/ui/... or whatever.
https://vitejs.dev/guide/performance.html#avoid-barrel-files
Avoid Barrel Files
Barrel files are files that re-export the APIs of other files in the same directory. For example:
js
// src/utils/index.js
export * from './color.js'
export * from './dom.js'
export * from './slash.js'
When you only import an individual API, e.g. import { slash } from './utils', all the files in that barrel file need to be fetched and transformed as they may contain the slash API and may also contain side-effects that run on initialization. This means you're loading more files than required on the initial page load, resulting in a slower page load.
If possible, you should avoid barrel files and import the individual APIs directly, e.g. import { slash } from './utils/slash.js'. You can read issue #8237 for more information.
We have numerous examples, some worse than others.
|
export * from './access' |
|
export * from './disks' |
|
export * from './images' |
|
export * from './instances' |
|
export * from './networking' |
|
export * from './snapshots' |
I think this means that from Vite's point of view, any file that imports any UI component depends on every UI component.
|
export * from './lib/action-menu/ActionMenu' |
|
export * from './lib/auth-code/AuthCodeInput' |
|
export * from './lib/badge/Badge' |
|
export * from './lib/button/Button' |
|
export * from './lib/checkbox/Checkbox' |
|
export * from './lib/copy-to-clipboard/CopyToClipboard' |
|
export * from './lib/date-picker/DateRangePicker' |
|
export * from './lib/divider/Divider' |
|
export * from './lib/dropdown-menu/DropdownMenu' |
|
export * from './lib/file-input/FileInput' |
|
export * from './lib/empty-message/EmptyMessage' |
|
export * from './lib/field-label/FieldLabel' |
|
|
|
export * from './lib/identicon/Identicon' |
|
export * from './lib/message/Message' |
|
export * from './lib/listbox/Listbox' |
|
export * from './lib/message/Message' |
|
export * from './lib/modal/Modal' |
|
export * from './lib/ModalLinks' |
|
export * as MiniTable from './lib/mini-table/MiniTable' |
|
export * from './lib/number-input/NumberInput' |
|
export * from './lib/page-header/PageHeader' |
|
export * from './lib/pagination/Pagination' |
|
export * from './lib/progress/Progress' |
|
export * from './lib/properties-table/PropertiesTable' |
|
export * from './lib/radio-group/RadioGroup' |
|
export * from './lib/radio/Radio' |
|
export * from './lib/resource-meter/ResourceMeter' |
|
export * from './lib/settings-group/SettingsGroup' |
|
export * from './lib/side-modal/SideModal' |
|
export * from './lib/skip-link/SkipLink' |
|
export * from './lib/spinner/Spinner' |
|
export * from './lib/table/Table' |
|
export * from './lib/tabs/Tabs' |
|
export * from './lib/text-input/TextInput' |
|
export * from './lib/toast/Toast' |
|
export * from './lib/tooltip/Tooltip' |
|
export * from './lib/truncate/Truncate' |
|
export * from './util/wrap' |
|
|
|
export * from '@oxide/design-system/icons/react' |
Barrel files are bad for Vite dev server performance (and probably bad for code splitting too if we were doing more of it — and we intend to). We should get rid of them, starting with the biggest ones. It should be a noisy but very mechanical change. I think this also means getting rid of
@oxide/uiand friends in favor of normal direct imports from, e.g.,~/libs/ui/...or whatever.https://vitejs.dev/guide/performance.html#avoid-barrel-files
We have numerous examples, some worse than others.
console/app/pages/project/index.tsx
Lines 9 to 14 in 5d989a7
I think this means that from Vite's point of view, any file that imports any UI component depends on every UI component.
console/libs/ui/index.ts
Lines 15 to 55 in 5d989a7