Next js common bundle is getting bigger than 550 kbs

[rahul3103]

My folder structure is

.src/
├── components
│   ├── Base
│   │   ├── Button
│   │   │   └── Button.jsx
│   │   ├── Checkbox
│   │   │   └── Checkbox.jsx
│   │   └── index.js
│   ├── Composite
│   │   ├── AboutDrawer
│   │   │   └── AboutDrawer.jsx
│   │   └── index.js
│   ├── Container
│   │   ├── Batch
│   │   │   ├── Batch.jsx
│   │   └── index.js

So, basically I import like this

import { Button, Checkbox } from './components/Base';

Similarly for composite and containers but in my build I am getting all my components getting added together in common chunk like this

+ First Load JS shared by all                                                             544 kB
  ├ static/pages/_app.js                                                                  44.5 kB
  ├ chunks/0c427a655d9403f7dac568f61d54bc3a0a076000.1255c1.js                             9.07 kB
  ├ chunks/154e5c1e8c086a9c75a17cb3d0ce05a5d5989541.30a49e.js                             4.66 kB
  ├ chunks/4ec9d92409f1e756c674245a6ebde4e4b9f1c3cb.232262.js                             18.5 kB
  ├ chunks/62f56c8205754453a75eeae7838257e73a95eb2f.222465.js                             2.76 kB
  ├ chunks/7284791643293bcf3ac1591cc4862e96973957a8.9babe3.js                             3.84 kB
  ├ chunks/949382b6a867a6d3a65aa642346894560d05ef7a.21fa5b.js                             98.3 kB
  ├ chunks/a9b991a426760cdeb698ecebeb4b66f8aed73dd7.7fa176.js                             101 kB
  ├ chunks/c0d53ec4.713370.js                                                             28.6 kB
  ├ chunks/commons.90d196.js                                                              181 kB
  ├ chunks/f634702a4e841db03723154f17c966aad0b368c1.d50012.js                             4.71 kB
  ├ chunks/framework.619a4f.js                                                            40.3 kB
  ├ runtime/main.277472.js                                                                6.33 kB
  ├ runtime/webpack.1c5199.js                                                             746 B
  └ css/ea00252dd85417fc6f66.css                                                          1.02 kB

This is the screenshot of bundle
https://i.ibb.co/58dDptC/Screenshot-2020-05-28-at-3-19-35-PM.png

Than I tried importing like this
import Button from './components/Base/Button/Button';
import Checkbox from './components/Checkbox/Checkbox';

and my common chunk reduced significantly but the problem was I need to use absolute path of files.

But with Next 9.4 even I also added alias to do that
https://nextjs.org/docs/advanced-features/module-path-aliases

and which changed my import to
import Button from '@base/Button/Button';
import Checkbox from '@base/Checkbox/Checkbox';

Now the problems with the above

1. I can't import like this which was my primary motto
   import { Button, Checkbox } from '@base'; because if I do so my build gets bigger.

[zerotucks]

+1