11

I read this here - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - that doing importing all things from a library will not allow tree shaking to remove it, even if it is not used. I don't believe this, is it really true? I would think that tree shaking would identify that none of the functions except a couple were used, and then remove those.

There is a really easy way to reduce bundle size by just checking your imports. When performing methods or components from 3rd party libraries, make sure you import only the things you need, not the whole library itself. For instance, if you’re using lodash and need the fill method, import it directly instead of calling it on lodash object:

// Instead of this

import _ from ‘lodash’

let array = [1, 2, 3];
_.fill(array, '');

// Do this

import { fill } from ‘lodash’

let array = [1, 2, 3];
fill(array, '');
Noitidart
  • 35,443
  • 37
  • 154
  • 323

2 Answers2

27

Using current version of Webpack (5.3.0), this is not true. With the following files:

// src/index.js
import * as a from './modules'

console.log(a.foo)
// Or: console.log(a.baz.foo)

// src/modules.js
export const foo = 'foo'
export const bar = 'bar'
export const baz = {
  foo: 'foo',
  bar: 'bar',
}

Webpack outputs:

// dist/main.js
(()=>{"use strict";console.log("foo")})();

Based on this Github issue, it was not true even at the time of the previous answer.

cdoublev
  • 709
  • 6
  • 18
  • So using asterisk import is totally ok for tree shaking – Fma Jun 07 '21 at 08:21
  • 1
    If the imported module imports itself other modules which are not marked as side effect free, the latters may not be tree shaked even when they are not used in the imported module. I believe the Webpack documentation has information about this. – cdoublev Jun 08 '21 at 19:00
  • Thanks for that and checking out historically as well @cdoublev! I found this interesting related article, his kind of is saying the opposite - https://javascript.plainenglish.io/your-next-js-bundle-will-thank-you-89962402a5ec - what do you think about this article? I did accept your answer as the linked references show its true, thanks! – Noitidart Oct 23 '22 at 16:40
  • Yeah, it is saying the opposite but does not explain why. I think everyone should read Medium articles with a cautious eye. Webpack should have a better doc on this. – cdoublev Nov 06 '22 at 11:07
-2

Yes it is true. This is done via static analysis on the named imports on the es modules.

The tool is going to statically analyze your imports and just copy from the source those that you had stated. If it were to run throughout all your code, identify all the functions that you called from that file, go back, remove those that aren't used, it would be costly and would take much more time.

if you have:

import {a} from 'filea'

but you have

export const a = 'a';
export const b = 'b';

The bundler/tool can go to your file, see:

"oh, one imported just a from filea, let me pull just it."

https://webpack.js.org/guides/tree-shaking/

https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77

https://medium.com/@zwegrzyniak/webpack-4-1-and-es-modules-esm-dd0bd7dca4da

PlayMa256
  • 6,603
  • 2
  • 34
  • 54