#javascript #reactjs #webpack #next.js #babeljs
Вопрос:
В настоящее время мое приложение работает "next": "^10.1.2", с Webpack4. На рисунке ниже у меня есть две страницы, которые импортируют разные компоненты, но, как вы можете видеть, вместо этого импортируется вся моя библиотека, которую я создал локально.
Что я ожидаю от webpack/babel, так это встряхнуть библиотеку и импортировать только тот компонент, который мне нужен. Изначально я думал, что это способ импорта/экспорта модуля, и попытался выполнить рефакторинг для импорта непосредственно из самого компонента вместо index.js файла, но поскольку в библиотеке много разных компонентов, на рефакторинг всех страниц, использующих компоненты, уйдет слишком много времени.
В index.js нем экспортируется как таковой
...
export { default as Card } from './card';
export { default as Carousel } from './carousel';
export { default as Checkbox } from './checkbox';
... Кроме того, я пробовал импортировать вавилонский плагин, но, похоже, ничего не помогает уменьшить. Я также пытался рассмотреть возможность обновления до использования webpack5, но для его обновления потребуется некоторое время, потому что произошла какая-то ошибка.
Обратиться сюда, чтобы узнать, сталкивался ли кто-нибудь с этим раньше и нашел ли какое-либо решение этой проблемы?
Скриншот
EDIT: Just an update on something else that I have missed out is that these are all server side rendered through a custom server. Not too sure if that extra bit of information is useful or not. I was reading up on NextJS custom server and it said that it does not go through babel/webpack. Is that the reason why it doesn’t tree shake?