@arco-design minimal starter with Vite.js, React.js, Typescript
Performant from day 1.
Dev server launch in sub second
Thanks to Vite.js and esbuild, the dev server starts in 400ms.
Icons and styles imported on-demand
checkout vite.config.ts
plugins object.
plugins: [
styleImport({
libs: [
// Dynamic import @arco-design styles
{
libraryName: "@arco-design/web-react",
esModule: true,
resolveStyle: (name) =>
`@arco-design/web-react/es/${name}/style/index`,
},
// Dynamic import @arco-design icons
{
libraryName: "@arco-design/web-react/icon",
libraryNameChangeCase: "pascalCase",
resolveStyle: (name) =>
`@arco-design/web-react/icon/react-icon/${name}`,
resolveComponent: (name) =>
`@arco-design/web-react/icon/react-icon/${name}`,
},
],
}),
]
Bundle size optimized
The build process takes only 7s+ (for this starter, this number will grow if your project is getting larger)
With only 1 button component & 2 icons, the output bundle size is around 50kb:
$ tsc && vite build
vite v2.6.13 building for production...
✓ 841 modules transformed.
dist/assets/favicon.17e50649.svg 1.49 KiB
dist/index.html 0.52 KiB
dist/assets/index.5d3250f3.js 1.01 KiB / gzip: 0.53 KiB
dist/assets/index.e3bd17d3.css 39.13 KiB / gzip: 6.66 KiB
dist/assets/arco-design.5c596253.js 142.33 KiB / gzip: 45.32 KiB
✨ Done in 7.84s.
Theming
checkout vite.config.ts
css object.
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
// Customize stylings here
modifyVars: {
// arcoblue-6 is the primary-color :)))
"arcoblue-6": "#1DA57A",
},
},
},
},
Others
this repo is minimized to help you understand how it works, just focus on vite.config.ts
.
Your star is appreciated.