Легкая победа с потенциально большим выигрышем
- Потенциальные выгоды: Уменьшение размера пакета примерно на 30%.
- Требуемое время: 5 минут.
- Сложность: легкая.
Если ваше приложение использует React, вы можете использовать React-lite меньшего размера в качестве замены для ваших производственных сборок. Одно только это изменение уменьшило размер моего пакета чуть более чем на 30 процентов.
Что это?
React-lite — это оптимизированная реализация API React. Он не включает некоторые менее используемые функции, такие как рендеринг на стороне сервера (поэтому используйте его только на стороне клиента), но включает все, что используется в большинстве сборок.
Если вы хотите знать, сработает ли это для вас, самый простой способ узнать это — просто попробовать. Это займет всего лишь несколько минут…
Как это сделать
Допустим, вы импортируете реакцию следующим образом:
import as React from "react"; import { render } from "react-dom";
Чтобы использовать react-lite, нам нужно, чтобы весь импорт из react или react-dom был импортом из react-lite.
К счастью, в Webpack есть возможность сделать именно это, не заменяя ни единой строки кода приложения. Просто добавьте псевдонимы в раздел разрешения конфигурации вашего веб-пакета.
resolve: { alias: { 'react': 'react-lite', 'react-dom': 'react-lite' } }
Это говорит Webpack переписать импорт из react и react-dom как импорт из react-lite.
Теперь просто убедитесь, что npm install react-lite
, а затем запустите сборку.