https://github.com/hiroppy/chakra-ui-optimization-loader
Optimize your bundle size of chakra-ui
https://github.com/hiroppy/chakra-ui-optimization-loader
Last synced: 12 months ago
JSON representation
Optimize your bundle size of chakra-ui
- Host: GitHub
- URL: https://github.com/hiroppy/chakra-ui-optimization-loader
- Owner: hiroppy
- Created: 2021-09-16T23:51:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-08T00:49:47.000Z (over 4 years ago)
- Last Synced: 2025-04-11T17:49:21.027Z (about 1 year ago)
- Language: JavaScript
- Size: 7.66 MB
- Stars: 15
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## chakra-ui-optimization-loader
Reduce bundle size of chakra-ui via webpack loader.
**This loader doesn't ensure to safe your runtime code, be careful to add it.**
## Supporting keys
- components
- colors
- breakpoints
## Usage
```sh
$ npm i chakra-ui-optimization-loader
```
```js
module.exports = {
module: {
rules: [
test: /\.js/,
include: resolve('./node_modules/@chakra'),
loader: 'chakra-ui-optimization-loader',
options: {
ignoreComponents: ['Alert', 'Table', 'Tabs', 'Slider'],
ignoreColors: [
'facebook',
'purple',
'green',
'pink',
'linkedin',
'facebook',
'messenger',
'whatsapp',
'twitter',
'telegram',
],
ignoreBreakpoints: ['xl', '2xl'],
},
]
}
};
```
## Comparing
See [the test code](./tests/nextjs).
### w/o the loader
@chakra-ui: 186kb
### w/ the loader
Using the config of its usage.
@chakra-ui: 172.kb
