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

Я сделал несколько проектов по React с Material-UI и Ant Design. Material-UI - отличный набор компонентов React для разработки веб-приложений. Ant Design - это потрясающий набор компонентов React. Если вы работаете с ними, вы знаете их богатое разнообразие компонентов.

К сожалению, у меня проблемы с размером комплекта. Я много искал в Интернете, надеясь найти способ оптимизировать размер пакета веб-пакетов. Вот мой подход к тому, как оптимизировать и уменьшить размер пакета за пять шагов.

Если вы не знаете, как настроить webpack 4, вот моя предыдущая статья Как настроить webpack 4.

Приступим к развитию конфигурации нашего веб-пакета.

1. Проанализируйте наш пакет

Во-первых, мы должны знать, какой компонент в нашем коде имеет больший размер.

Я анализирую зависимости наших пакетов с помощью webpack-bundle-analyzer. Эта библиотека анализирует статистику веб-пакетов и дает отличную визуализацию с интерактивной масштабируемой древовидной картой.

Он создаст два представления: одно для вашего кода React, а другое для node_modules. Для этого нам необходимо установить его:

npm install --save-dev webpack-bundle-analyzer

Нам нужно добавить в webpack.config.js следующий код:

Когда мы запустим приложение, появится эта визуализация:

Это помогает понять, какой компонент слишком большой. И теперь мы знаем, что у нас проблемы с Ant-Design, Ant-Design Icons и moment.js.

2. Конфигурация Babel

Babel-plugin-transform-import

Большинство разработчиков импортируют lodash следующим образом:

import { get } from 'lodash';

Похоже, это приведет к очень большому размеру пакета, потому что мы импортируем все модули Lodash. Мы должны использовать это так:

import _get from 'lodash/get';

В этом случае мы импортируем определенные методы из Lodash, а не весь пакет в наш код.

Примечание. Мы можем использовать babel-plugin-transform-import. Этот плагин преобразует вашу первую строку во вторую строку с помощью этого конкретного метода и позволит вам извлечь нужные модули.

Вам следует установить babel-plugin-transform-imports:

npm install --save-dev babel-plugin-transform-imports

Далее мы должны настроить наш wepback.config.js:

["transform-imports"], {
  "lodash": {
    "transform": "lodash/${member}",
    "preventFullImport": true
  }
}

Вавилон-плагин-импорт

Когда мы импортируем компонент из Ant-Design, мы импортируем все неиспользуемые компоненты.

Чтобы Ant-Design загружал только нужные модули, используйте babel-plugin-import. Этот плагин совместим с antd, antd-mobile, lodash, material-UI и т. Д.

Установим и протестируем:

npm install babel-plugin-import --save-dev

Добавьте следующий код в webpack.config.js:

Мы будем импортировать из Ant-Design компонентов только используемые модули с CSS из каталога es.

Для lodash:

{
  "libraryName": "lodash",
  "libraryDirectory": "",
  "camel2DashComponentName": false,  // default: true
}

Для material-ui:

{
  "libraryName": "@material-ui/core",
  "libraryDirectory": "components",  // default: lib
  "camel2DashComponentName": false,  // default: true
}

3. Уменьшите размер Moment.js.

Moment.js - отличная библиотека для работы с современными объектами. Но если вы посмотрите на размер пакета, moment.js составляет 500 КБ.

Мы можем уменьшить размер moment.js с 500 КБ до 125 КБ с помощью ContextReplacementPlugin. Он определяет включение файлов локали в файл конфигурации веб-пакета:

Нам не нужно загружать файлы локали в наш код.

4. Уменьшите размер значков Ant-Design.

Если вы посмотрите на наш комплект, мы загрузили кучу огромных файлов Ant-Design SVG icons. Давайте уменьшим их размер, добавив следующий код в webpack.config.js:

resolve: {
  alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "src/constants/icons.js")
  }
}

Затем мы должны создать icons.js в папке src/constants (или где угодно). Убедитесь, что он соответствует пути псевдонима. В этом файле вы определяете, какие значки Ant Design следует включить.

export {
  default as BarChartOutline
} from "@ant-design/icons/lib/outline/BarChartOutline";

5. Разделение кода с помощью SplitChunksPlugin

SplitChunksPlugin разбивает наш пакет на несколько небольших частей и загружает пакеты только по мере необходимости. webpack использует этот плагин внутри, и мы можем включить / настроить его внутри optimization блока webpack.config.js.

В моем случае я разделился на две части (node_modules и src).

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendors",
        chunks: "all"
      }
    }
  }
}

Наконец, размер пакета был уменьшен с 6,26 МБ до 4,56 МБ.

Надеюсь, этот пост был вам полезен.

Ресурсы