Импорт веб-пакетов * портит дерево?

Question

Я прочитал это здесь - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - что импорт всего из библиотеки не позволит удалить его, даже если он не используется.Я не верю в это, правда ли это?Я думаю, что встряхивание дерева определит, что ни одна из функций, кроме пары, не использовалась, и затем удалит их.

Существует действительно простой способ уменьшить размер пакета, просто проверив импорт.При выполнении методов или компонентов из сторонних библиотек убедитесь, что вы импортируете только то, что вам нужно, а не всю библиотеку.Например, если вы используете lodash и вам нужен метод fill, импортируйте его напрямую, а не вызывайте его для объекта lodash:

// 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, '?');

Answer 1

Да, это правда.Это делается с помощью статического анализа именованных импортов в модулях es.

Инструмент собирается статически анализировать импорт и просто копировать из источника те, которые вы указали.Если бы он выполнялся по всему вашему коду, определите все функции, которые вы вызывали из этого файла, вернитесь назад, удалите те, которые не используются, это будет дорогостоящим и займет гораздо больше времени.

, еслиу вас есть:

import {a} from 'filea'

, но у вас есть

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

Пакет / инструмент может перейти к вашему файлу, см .:

"О, один импортированный просто a из filea, позвольте мне вытащить только его."

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