Found 1 bookmarks
Custom sorting
How we optimized package imports in Next.js – Vercel
How we optimized package imports in Next.js – Vercel

Статья от Vercel про вред от паттерна barrel file. В статье vercel рассказывают, как они оптимизировали импорты в next.js чтобы избежать обработки таких файлов и как ускорили сборку и старт приложения на 30-40%

barrel-file - это когда, например, в корне библиотеки лежит index.js, который ре-экспортит кучу сущностей из других вложенных файлов. Проблема в том, что не смотря на то, что в коде используется всего лишь 1 ре-экспортируемая сущность, бандлерам и некоторым тулам, например jest, приходится сначала обработать все файлы. Что снижает скорость работы инструмента

Каноничный пример

export { default as module1 } from './module1'; export { default as module2 } from './module2'; export { default as module3 } from './module3';

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

Команда next.js ввела новую опцию в конфиг: optimizePackageImports, которая заставляет фреймворк просканировать barrel-file и в рамках сборки поменять импорты на более точечные. Это изменение позволило ускорить сборку на 15-70%. Например, импорт @material-ui/icons ускорился с 10 секунд до 2.9 секунды.

Также в статье указана ссылка на eslint-плагин, который умеет оптимизировать импорты barrel-файлов

·vercel.com·
How we optimized package imports in Next.js – Vercel