Как оптимизировать размер вашего приложения
Я сделал несколько проектов по 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 МБ.
Надеюсь, этот пост был вам полезен.