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

1$ npm i chakra-ui-optimization-loader

1module.exports = {
2  module: {
3    rules: [
4      test: /\.js/,
5      include: resolve('./node_modules/@chakra'),
6      loader: 'chakra-ui-optimization-loader',
7      options: {
8        ignoreComponents: ['Alert', 'Table', 'Tabs', 'Slider'],
9        ignoreColors: [
10          'facebook',
11          'purple',
12          'green',
13          'pink',
14          'linkedin',
15          'facebook',
16          'messenger',
17          'whatsapp',
18          'twitter',
19          'telegram',
20        ],
21        ignoreBreakpoints: ['xl', '2xl'],
22      },
23    ]
24  }
25};

Comparing

See the test code.

w/o the loader

@chakra-ui: 186kb

w/ the loader

Using the config of its usage.

@chakra-ui: 172.kb