为 webpack 包大小导入文件的更好方法

Question

hooks/index.js

export { default as useDialog } from './useDialog'
export { default as useCurrencies } from './useCurrencies'
export { default as useUser } from './useUser'

Let's imagine that I have 3 files in hooks folder ( useDialog , useCurrencies , useUser ). I want to make the correct imports from this folder. Now I do imports like this:

import {useDialog} from 'hooks'

Is it correct way to import this file, or it is better to import it like import useDialog from 'hooks/useDialog' ? What is better for my bundle size?

Answer 1

You can try yourself and compare the bundle sizes on production from before and after. I'm gonna explain how to do it if anyone needs it.

First do these steps with the code importing from the index: import {useDialog} from 'hooks'

yarn build
serve -s build

Open the local address (http://localhost:5000/) on incognito mode. Then open Inspect -> Coverage.

At the bottom you can see the size. eg: 1.2MB of 2.1MB (55%) used so far 964kB unused

Then change your code and import directly from the file: import useDialog from 'hooks/useDialog' , and repeat the build and check the size.

Maybe if the files are too small you are not going to notice a difference, but you will if there are any big files or files that imports a big external library.

I tried this comparison on my project and there was one file importing and using moment. I was not even using this component, but the bundle size was increased because I was importing another component from the same index.

Before I was always importing from a folder like 'hooks' , but from now on I will always import directly from the file 'hooks/useDialog' .

I'm just sharing my experience, Please, compare the bundles on your own projects!