Легкая победа с потенциально большим выигрышем

  • Потенциальные выгоды: Уменьшение размера пакета примерно на 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, а затем запустите сборку.