Skip to content

Tree Shaking

Compare
Choose a tag to compare
@ArthurStam ArthurStam released this 25 Aug 15:12
· 10806 commits to master since this release

Раньше импорт вида 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 библиотеки, так что не забудьте его поставить.