5 способов уменьшения размера пакетов JavaScript



Книга 5 способов уменьшения размера пакетов JavaScript

Сегодня мы активно используем JavaScript в веб-разработке. Существует множество приложений с большими размерами пакетов. Однако когда их объем переходит критическую точку, это может сказаться на эффективности софта.

В этой статье мы рассмотрим 5 способов уменьшить размер пакетов JavaScript, чтобы избавиться от проблем с производительностью. 


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

Разделение кода позволяет “расщепить” код на комплекты и загружать их по требованию.

Существует несколько способов разделения кода с помощью Webpack. Среди них динамический импорт является одним из наиболее часто используемых. С помощью этого метода вы можете легко разделить код в зависимости от маршрутов, используемых во фронтенде.

Предположим, вы создаете платформу для новой социальной сети. Большую часть времени пользователи будут взаимодействовать с лентой новостей и страницей своего профиля. Поэтому на первых порах достаточно загрузить JavaScript для этих двух страниц, а остальные загружать по требованию.

Если вы используете Angular или React, разделять код будет еще проще, поскольку они по умолчанию поддерживают отложенную загрузку.

import React, { lazy } from 'react'

const App = (props) => (
...
<Route exact path="/" component={lazy(() => import('routes/home'))} />
<Route path="/profile" component={lazy(() => import('routes/profile'))} />
<Route path="/settings" component={lazy(() => import('routes/settings'))} />
...
)

На приведенном выше примере показано, как можно загружать компоненты в React по требованию. Как только вы определитесь с ними, Webpack позаботится обо всем остальном.

Создание независимых компонентов, которые можно компоновать как во время сборки, так и во время выполнения (с помощью динамического импорта), теперь не составляет труда.

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

В примерах ниже показаны независимые компоненты, совместно используемые в областях видимости Bit.

Аспект ‘compositions’ на Bit подтверждает, что независимо разработанные компоненты будут интегрированы в будущие хост-приложения ожидаемым образом

2. Использование плагинов Webpack для встряхивания деревьев

Webpack использует граф зависимостей для генерации пакетов, и этот граф состоит из модулей, которые используются в приложении. По мере роста приложения это дерево может накапливать множество “мертвых” или неиспользуемых строк кода, что приводит к проблемам с производительностью.

Встряхивание деревьев  —  это техника, используемая для устранения “мертвых” кодов. Webpack предоставляет несколько плагинов для реализации этого процесса.

babel-plugin-lodash

Если вы используете lodash, вам может понадобиться этот плагин, поскольку не все его компоненты нужны в приложении.

Плагин babel-plugin-lodash выбирает то, что необходимо импортировать из lodash. Все, что вам нужно сделать, это установить babel-plugin-lodash с помощью npm или yarn и обновить файл конфигурации Webpack следующим образом:

// Установка

npm install --save-dev babel-plugin-lodash

// Использование

'module': {
'loaders': [{
'loader': 'babel-loader',
'test': /\.js$/,
'exclude': /node_modules/,
'query': {
'plugins': ['lodash'],
'presets': [['@babel/env', { 'targets': { 'node': 6 } }]]
}
}]
}

babel-plugin-import

babel-plugin-import позволяет Webpack выбирать только необходимые строки кода при прохождении по графу зависимостей. В отличие от babel-plugin-lodash, этот плагин не ограничивается lodash, и вы можете использовать его с такими пакетами, как antd.

// Установка

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

// Использование

webpackConfig.module.rules = [
{
test: /\.(js|jsx)$/,
include: [path.resolve(__dirname, 'src', 'client')],
use: [{
loader: 'babel-loader',
options: {
plugins: [
[
'import',
{ libraryName: 'antd', style: true },
'antd',
]
],
},
}],
},
]

Помимо этих двух плагинов существует множество других, и вы можете выбрать один из них в зависимости от ваших потребностей.


3. Использование альтернативных библиотек и удаление дубликатов

Любому разработчику следует измерять размеры пакетов, которые он использует в приложениях. Это помогает легко решать проблемы производительности и выявлять пакеты, требующие оптимизации.

Анализатор пакетов Webpack позволяет визуализировать размеры пакетов в вашем приложении.

Как работает анализатор пакетов?

Вы можете использовать анализатор пакетов Webpack, импортировав его в Webpack config в качестве плагина или используя команды CLI.

// Установка

npm install --save-dev webpack-bundle-analyzer
// или
yarn add -D webpack-bundle-analyzer

// web pack config

import WebpackBundleAnalyzer from 'webpack-bundle-analyzer'
webpackConfig.plugins = [
new WebpackBundleAnalyzer.BundleAnalyzerPlugin(),
]

// Команды CLI позволят сгенерировать json-файл со статистическими данными

webpack --profile --json > stats.json

Этот анализ дает четкое представление о каждой библиотеке, используемой в проекте, а также о том, как они влияют на размер пакетов JavaScript. Кроме того, вы можете решить, нужны ли вам замены или же следует удалить все дубликаты библиотек, найденные в пакете JavaScript.


4. Сжатие пакетов

Если увеличивающийся размер пакетов сказывается на производительности приложений, вы можете сжать их. Gzip и Brotli  —  наиболее часто используемые методы сжатия. Применяйте Webpack-плагины этих методов, чтобы упростить процесс компрессии.

Согласно исследованию CertSimple, Brotli сжимает файлы JavaScript на 14% больше, чем Gzip.

Вы можете использовать compression-webpack-plugin для сжатия файлов с помощью метода Gzip и brotli-webpack-plugin для сжатия с помощью Brotli. Оба этих плагина доступны в виде пакетов NPM, и вам просто нужно загрузить их и изменить Webpack config следующим образом:

// Для GZIP

// Установка

npm install compression-webpack-plugin --save-dev

// Использование
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
plugins: [new CompressionPlugin()],
};


// Для Brotli

// Установка
npm install --save-dev brotli-webpack-plugin

// Использование

var BrotliPlugin = require('brotli-webpack-plugin');
module.exports = {
plugins: [
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8
})
]
}

Примечание: указанные методы сжатия поддерживаются не всеми браузерами.


5. Использование продуктивного режима в Webpack

Запуск проекта в продуктивном режиме позволяет уменьшить размер пакета по сравнению с функционированием в режиме разработки. Webpack предоставляет отдельный флаг (-p) для включения этой функции и удаляет все белые пробелы и новые строки в коде.

webpack -p --mode=production

Этот способ также предотвращает попадание отладочного кода в пакет и позволяет модифицировать код с помощью Uglify.

Заключение

Создание современных веб-приложений предусматривает не только разработку основных функций. Мы должны уделять внимание таким аспектам, как производительность и эффективность, чтобы получать максимальную отдачу от наших усилий.

Размер пакета JavaScript  —  это существенный фактор, влияющий на производительность приложений. К сожалению, по мере роста использования JavaScript становится нелегко поддерживать пакеты меньшего размера.

113   0  
    Ничего не найдено.

Добавить ответ:
Отменить.