#javascript #reactjs #webpack
Вопрос:
Я пользуюсь npx create-react-app my-app , и он быстро загружается. Затем он устанавливается и длится слишком долго, час или больше. Затем я захожу в папку, которую я только что установил, и node_modules папка слишком большая, ее размер составляет 4,24 ГБ.
Это нормально? Когда я копирую и вставляю проект React, который я установил, чтобы создать новый проект, он также длится слишком долго, я думаю, из-за количества файлов в node_modules папке. Опять же, это почти час.
Я чувствую, что это не очень хороший способ начинать проекты. Это отнимает слишком много времени, заполняет все пространство на моем диске и отнимает всю мощность диска для этой конкретной задачи.
Мне было интересно, есть ли способ создать уменьшенную версию проекта или что-то в этом роде. Какой — то способ не проходить через это каждый раз, когда мне нужно создавать новый проект.
Я не знаю, является ли этот вопрос слишком абстрактным, но если каждый раз, когда я хочу начать новый проект, мне приходится использовать 4 ГБ места и тратить час на копирование или установку различных модулей, в зависимости от того, использовал ли я команду или просто скопировал и вставил папку, это пустая трата времени и памяти, когда я еще даже не начал кодировать.
Комментарии:
1. Один из вариантов — не использовать CRA-он многое настраивает для вас, но это компромисс, он устанавливает множество зависимостей, которые вам на самом деле могут не понадобиться. Возможно, этого не стоит делать, если вы используете такое ограниченное оборудование и сеть.
2. Мой не превышает 20 МБ, как вы поднимаетесь выше 4 ГБ?
3. node_модули весят 4 ГБ для меня с помощью приложения create-react-app
Ответ №1:
Вот несколько зацепок:
- Не используйте CRA. Создайте свое приложение с нуля с помощью webpack и babel (или других аналогичных инструментов).
- Устанавливайте только необходимые пакеты npm. Избегайте пользовательских библиотек и всей той суеты, которую вы могли бы легко написать сами в js.
- Код-разделите свои маршруты и компоненты.
- Напишите повторно используемый код и компоненты.
- Используйте эффективные инструменты для повышения производительности с помощью webpack, такие как плагин Terser.