Как загрузить модули ES6 отдельно (по мере необходимости) ака. Дрожание деревьев?

Question

Как загрузить модули ES6 отдельно (по мере необходимости) ака. Дрожание деревьев?

Прямо сейчас я просматриваю свое приложение, меняя экземпляры этого шаблона:

import {Grid, Row, Col} from 'react-bootstrap'

в:

import {Grid, Row, Col} from '../react-bootstrap'

где react-bootstrap.js простой файл в корне моего проекта с выборочным импортом необходимых мне модулей ES6 из этого пакета NPM:

import Grid  from 'react-bootstrap/es/Grid'
import Col   from 'react-bootstrap/es/Col'
import Row   from 'react-bootstrap/es/Row'

export {Grid, Col, Row}

Сделав это для нескольких пакетов, я смог уменьшить размер файла пакета более чем на 50%.

Есть ли модуль или плагин WebPack, который может делать это автоматически для любого пакета?

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

Редактировать: как указывает Swivel, это известно как встряхивание дерева и должно выполняться автоматически Webpack 3+ с UglifyJSPlugin, который включен в производственную конфигурацию из сценариев реагирования, которые я использую.

Я не уверен, является ли это ошибкой в каком-либо из этих проектов, но я вижу большие приросты размера при выполнении выборочного импорта вручную, что не должно быть в случае выполнения встряхивания дерева.

4

node.js webpack create-react-app es6-modules

Источник

user517371 11 дек '17 в 18:37

1 ответ

Другие вопросы по тегам node.js webpack create-react-app es6-modules

user7285362 11 дек '17 в 18:43 2017-12-11 18:43 · Answer 1 · 2017-12-11 18:43

Я использовал для поиска этого и нашел эту статью. Это очень полезно. Я надеюсь, что это работает для вас.

1

Источник

user7285362 11 дек '17 в 18:43

user27561 09 дек '18 в 18:10 2018-12-09 18:10 · Answer 2 · 2018-12-09 18:10

Какой бы инструмент это ни был, он будет эквивалентен реализации встряхивания дерева, и его нужно будет интегрировать в ваш пакет. Так что нет.

Для записи, удаление мертвого кода - это не то же самое, что дрожание дерева. Потрясение дерева разрушает неиспользуемые зависимости между модулями. Устранение мертвого кода в одном модуле. Uglify.js знает только об одном модуле за раз, поэтому он не может сотрясать дерево: он просто устраняет мертвый код. Так что тот факт, что вы используете UglifyJSPlugin не имеет значения, трясется ли дерево в вашей среде сборки.