Tree Shaking
Раньше импорт вида import { Button } from '@vkontakte/vkui'
тянул за собой весь vkui.js
, который в несжатом виде весит более 700 килобайт.
Одно время мы спасались, импортируя компоненты напрямую: import Button from '@vkontakte/vkui/dist/components/Button/Button'
. Согласитесь, больно писать такое каждый раз.
Мы изменили дефолтную точку входа таким образом, что webpack стал понимать, какие vkui-модули использует разработчик. Теперь, если модуль не используется и не порождает сайд эффектов, то webpack не включит его в результирующий бандл.
Иными словами, импорт import { Button } from '@vkontakte/vkui'
включит в бандл вашего приложения только Button
и его зависимости.
And one more thing
Мы обнаружили, что babel-loader
при траспиляции es6-модулей добавляет в каждый из них результаты своей работы, дублируя тем самым кучу кода. У Babel есть специальный плагин, позволяющий импортировать всё это добро из внешнего модуля @babel/runtime
. Он (модуль) добавлен в peerDependencies
библиотеки, так что не забудьте его поставить.