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

Image by Peggychoucair from Pixabay

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

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

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

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

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

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

Если вы используете 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 позаботится обо всем остальном.

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

2. Использование плагинов Webpack для Tree shaking

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

Tree shaking («встряхивание дерева») — это прием, используемый для удаления мертвого кода. Для реализации Tree shaking Webpack предоставляет несколько плагинов.

babel-plugin-lodash

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

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

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

// Installation

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

// Usage

'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.

// Installation

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

// Usage

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 bundle analyzer визуализирует размер пакетов в приложении.

Вы можете использовать Webpack bundle analyzer, импортировав его в конфиг Webpack в виде плагина, или при помощи CLI-команд.

// Installation

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

// web pack config

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

// CLI commands - This weill generate a json file with stats

webpack --profile --json > stats.json

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

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

Если размер пакетов JavaScript вашего приложения растет и начинает сказываться на производительности, вы можете сжать их. Для сжатия чаще всего используются такие техники, как Gzip и Brotli. Для упрощения процесса можно воспользоваться плагинами Webpack.

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

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

// For GZIP

// Instalation

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

// Usage
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  plugins: [new CompressionPlugin()],
};


// For Brotli

// Instalation
npm install --save-dev brotli-webpack-plugin

// Usage

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
    })
  ]
}

Примечание. Следует учесть, что эти техники сжатия поддерживаются не всеми браузерами. Больше подробностей можно найти в статье «Will Brotli Replace Gzip?».

5. Использование Production Mode в Webpack

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

webpack -p --mode=production

Также это позволит вам вносить изменения в код при помощи Uglify.

Заключение

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

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

Надеюсь, пять способов уменьшения размера пакетов, рассмотренные в этой статье, вам пригодятся.

Перевод статьи «5 Methods to Reduce JavaScript Bundle Size».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх