Зачем указывать полный путь до файла js, если есть tree shaking?

Question

[alex4answ]

Добрый день, смотрю мануалы и очень много где используется такая конструкция:

import AppBar from '@material-ui/core/AppBar';
import ToolBar from '@material-ui/core/ToolBar';
// тут еще 20 импортов таких же

Почему вместо этого не используют:

import {
  AppBar, 
  ToolBar,
  // other
} from '@material-ui/core';

Если есть tree shaking, зачем указывать такие пути ?
Уроки и мануалы не такие старые, тогда уже была webpack tree skaking

Comments

[Kovalsky]

Во-первых, мне кажется просто разные IDE по разному делают автоимпорт - одни первым способом, другие - другим; способ записи импорта ни на что не влияет. Во-вторых, как это связано с tree shaking? Он же не об этом

[alex4answ]

Kovalsky,

Во-вторых, как это связано с tree shaking? Он же не об этом

Когда его не существовало, так импортировали только нужное, чтобы остальное не попадало в бандл.

Например если бы вы импортировали что-то из lodash как import { something } from 'lodash'
то в бандл попал бы весь lodash

Answer 1

[lookfortheroot]

Экспорт через скобки - именованный:

//module.js
function myModule() {...}
export { myModule }

//other.js
import { myModule } from 'module.js'

Экспорт через имя - по умолчанию:

//module.js
function myModule() {...}
export default myModule();

//other.js
import myModuleOtherName from 'module.js' //  для default можно использовать любое имя

Здесь полное описание: https://learn.javascript.ru/import-export
К tree-shaking это совершенно точно не имеет отношения. Если он не работает, причину нужно искать в другом.

Comments

[alex4answ]

lookfortheroot, это я понимаю, не понимаю для чего это делается, куча импортов из разных директорий.

1 Причину с Ковальским мы выяснили - "автоимпорт IDE"

Но если причина только в том, что нужно задавать свои имена, а не те что в именованном импорте, то это все решается переименованием типа

import { ModuleName as NewModuleName} from 'module'

На счет tree-shaking, раньше это был один из выходов избежать лишних файлов в бандле

[lookfortheroot]

alex4answ, так это потому что AppBar, Toolbar и т.д. - отдельные файлы и они неизбежно импортируются по одному.

А такое:

import {
  AppBar, 
  ToolBar,
  // other
} from '@material-ui/core';

отработает, если все эти функции/классы заданы в единственном файле core, но в данном случае это не так.

[Сергей delphinpro]

lookfortheroot, вообще-то заданы и так, и так
https://github.com/mui-org/material-ui/blob/next/p...

[lookfortheroot]

Сергей delphinpro, не там смотрите :). Сделайте npm install @material-ui/core и посмотрите структуру папок.
А в src лежат исходники для сборки самого Material UI в разные форматы - и там же уровнями выше скрипт для Rollup

[alex4answ]

lookfortheroot, не совсем понял о чем вы, но material-ui/core/(index.js) так же реэкспортирует дефолтные из подпапок, но именуя их, так что по сути ничего не меняет