0

Which JavaScript import syntax allows for tree shaking (preferably backwards compatible)?

1.

import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'

import {Button, TextField} from '@mui/material/'

import * from '@mui/material/'
  1. All of the above

Edit:

The real answer is in the comments section of the marked correct answer.

Kernel James
  • 3,752
  • 25
  • 32

1 Answers1

2

In your case either 1 or 2, both are fine. These will import only Button,TextField from material.

1.

import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'

import {Button, TextField} from '@mui/material/'

For third one, I assume you meant

import * as MuiMaterial from '@mui/material/'

This will import everything from material

Shan
  • 1,468
  • 2
  • 12
  • I was worried #2 would still pull in all the code since the whole file at `@mui/material` is referenced. And if the compiler was smart about #2, then it would also be smart for #3 since it can use whether I used any of the objects in my code. – Kernel James Jan 20 '22 at 06:29
  • In #2 you are just importing only two components , #3 you will import everything from `@mui/material` which is huge and then access the specific functions. Your Bundler([Webpack](https://webpack.js.org/guides/tree-shaking/) in case of CRA) will do the [Tree shaking](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking) process , it will create the tree map based on your import and export. If you import everything it will include everything from that library to your build. – Shan Jan 20 '22 at 07:00
  • According to the link you gave, the module developer (e.g. Lodash) also needs to split the modules into separate files too, right? What if in #2 the @mui developer put all components in the same file? – Kernel James Jan 20 '22 at 07:30
  • Tree shaking will work only in `ESM`, `CJS` doesn't support tree shaking.`lodash-es` is ESM , where as just `lodash` is CJS . You can also `import { sortBy } from "lodash-es"`(ESM) but don't `import { sortBy } from "lodash"`(CJS) (will import all),for the sake of tree shaking. Check out this thread to know more about [lodash-imports](https://stackoverflow.com/questions/35250500/correct-way-to-import-lodash). – Shan Jan 20 '22 at 08:25
  • How can I tell whether a library supports tree shaking? If the library accepts the #1 syntax, then it implies that they have used separate files for each module right? If the library doesn't accept #1 but accepts #2, then they might be using one flat file like Lodash right? – Kernel James Jan 21 '22 at 05:59
  • Check the library's documents – Shan Jan 21 '22 at 07:08
  • That means looking at the import syntax alone doesn't mean it supports tree shaking? However if it accepts syntax #1, then it definitely supports tree shaking? That means I should use syntax #1, if I want to be 100% certain that I am using tree shaking? – Kernel James Jan 22 '22 at 05:56
  • Yes, you can use #1 if you want to be 100% certain. – Shan Jan 22 '22 at 13:52
  • If the library uses separate files for modules and I use `import * from` and I only reference some of the modules in the body of the code, is React's package smart enough to tree shake the modules that I don't reference in the body? – Kernel James Jan 23 '22 at 06:07
  • First of all, React doesn't do tree shaking, your module bundler (Webpack/Rollup) does. Yes it's not smart enough to identify if you import everything in the first place. – Shan Jan 23 '22 at 08:29