Как уменьшить размер React приложения

Одна из самых больших проблем фреймворков на данный момент это их огромный бандл. Иногда он может весить от 300кб до 1 мб, а сама папка с проектом, включая node_modules, может весить до 200 мб! Сегодня мы попытаемся сжать наш бандл до ~50-100 Кб.

Шаг 1: Убираем Webpack, ставим Parcel

Один приём, которым можно воспользоваться, это заменить Webpack на другой, более легковесный и простой бандлер - Parcel. Давайте сравним create-react-app и create-react-app-parcel.

Запустим одинаковую последовательность команд:

create-react-app-* my-app # create-react-app и create-react-app-parcel
cd my-app
yarn
yarn build
du -sh dist

И получим следующие результаты.

CRA: 504KB

CRAP: 140KB

Parcel бандл занял в 5 раз меньше места. Но лучше всего использовать кастомную сборку, потому что CRAP глючит (не работает yarn build).

Для этого создадим новую папку, и пропишем следующие команды:

yarn init -y
yarn add -D parcel-bundler eslint eslint-plugin-react eslint-plugin-react-hooks
yarn add react react-dom
touch index.js index.html

В index.html прописываем:

<html>
<body>
  <div id="root" />
  <script src="index.js"></script>
</body>
</html>

в index.js вставляем:

import React from 'react'
import { render } from 'react-dom'

render(<h1>Hello World</h1>, document.body)

Также нам нужно установить Babel, для транспиляции JSX:

yarn add -D @babel/core @babel/preset-env @babel/preset-react

и в .babelrc:

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }

Теперь осталось лишь настроить ESLint. Это необязательная фича (не все используют линтеры, или юзают встроенный в редактор), но довольно полезная. Создаём файл .eslintc:

{
  "parser": "babel-eslint",
  "extends": ["plugin:react/recommended", "react-hooks"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn"
  }
}

Теперь у нас есть Parcel + React + ESLint + Babel сборка, с которой удобно работать также, как и с CRA.

Шаг 2: Заменяем React на Preact

К сожалению, Preact 10 пока ещё не вышел как стабильный релиз, но мы уже можем пользоваться такими фичами, как хуки, контекст, ленивая загрузка и Suspense в бета версии Preact.

Чтобы заменить React на Preact, нам нужно прописать алиасы в package.json. Мы будем использовать слой совместимости, а именно preact/compat.

  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }

Также нужно удалить React и ReactDOM и скачать preact:

yarn remove react react-dom
yarn add preact@10.0.0-beta.2

После сборки, бандл уменьшится вдвое (у меня в CRAP стало весить 52KB). Если вы не хотите пользоваться бета версией и не используете современные фичи реакта, можете поставить стабильную версию: yarn add preact. Пока что проблем с бетой у меня не возникало, так что особого смысла бояться её нет.

Заключение

С помощью замены бандлера и библиотеки мы смогли уменьшить приложение в 10 раз (в 5 раз меньше с Parcel, ещё 2 с Preact). Также можно убрать Babel и поставить htm, acorn-jsx, lighterhtml и др., но это уже вкусовщина, так как не каждый любит шаблонные строки, функциональный стиль в React и т.д.

Как уменьшить размер React приложения

Шаг 1: Убираем Webpack, ставим Parcel

Шаг 2: Заменяем React на Preact

Заключение

Report Page