Рубрики
Без рубрики

Высокопроизводительный веб-папак конфигурации для доставки в интернет

Перезарядите свой веб-сайт всего за 15 минут!

Автор оригинала: Drew Powers.

Все больше и больше разработчиков используют WebPack Для легкого объединения, но даже в 2017 году многие веб-сайты по-прежнему не воспользуются преимуществами крупнейших повышений производительности WebPack. WebPack имеет доступ к более мощным встроенным оптимизациям, чем вы можете знать. Вы используете все это?

В этой статье мы посмотрим 7 удобных оптимизаций WebPack, которые будут служить вашему приложению быстрее пользователям, независимо от того, что вы используете (и дополнительную опцию Foxback, если динамический импорт недоступен). В одном Пример приложения , начиная с отсутствия оптимизации, мы смогли сжать нашу запись JS по 700% И используйте интеллектуальную кэширование для поддержанных освежений.

Лучшая часть? Вы можете получить более быстрый сайт загрузки только 15 минут реализация нескольких из этих советов. Вы можете реально реалистично реализовать все эти советы о 1 час.

Что эта статья охватывает (более 🚀 скорость):

  1. 🕙 1 мин: Примера подъема (✨ Новое в WebPack 3 ✨)
  2. 🕙 2 мин: Минификация и уважение с uglifyjs2 🚀🚀🚀.
  3. 🕙 15 минут +: Динамический импорт для ленивых модулей 🚀🚀🚀🚀🚀
  4. 🕙 5 мин Детерминированные хэши Для лучшего кэширования 🚀🚀
  5. 🕙 10 мин Commonschunkplugin Для дедупликации и кэширования поставщика 🚀🚀
  6. 🕙 2 мин: Автономный плагин Для WebPack 🚀🚀.
  7. 🕙 10 мин: WebPack Bundle Analyzer 🚀🚀🚀.
  8. 🕙 2 мин: Многофункциональный автоматический CommonschunkPlugin Для особых случаев, когда динамический импорт не возможен 🚀

Эта статья предполагает, что вы используете WebPack 3.x (3.x похвастается A 98% бесшовных обновлений с 2.x, и должен быть безболезненным обновлением). Если вы все еще на 1.x, вы должны обновить, чтобы воспользоваться автоматическим встряхиванием дерева и удаление мертвого кода!

🖥 Примеры кода

Рабочие примеры всех этих концепций можно найти В этом образце оптимизации WebPack Optimize Repo Отказ В каждом разделе также будут ссылки. Это кумулятивно, когда это возможно, поэтому функции, добавленные на один шаг, будут перенесены на следующий.

1. Примеры подъема

Стандартное восточное время. Время: 🕙 1 мин

Стандартное восточное время. Boost: 🤷.

WebPack 3, выпущен в июне 2017 , был выпущен со многими улучшениями под капюшоном, а также более оптимизированным режимом компиляции под названием «Happe Heating», который спасает некоторых людей драгоценным КБ. Чтобы включить прицел для подъема, добавьте следующее на ваш Производство Конфигурация WebPack:

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
  ],
};

Джереми Гейд @tizmagik: 70k => 37k (GZIP!) Экономия на нашем главном расслоении с использованием #webpack 3 RC.2 + ModuleconcatenationPlugin 😲 🔥 Удивительная работа @TheLArkinn @wsokra et al!

Некоторые сообщили о сокращение почти 50% В размере пучка, но, в Пример 1 Я не заметил никаких изменений (это было технически 6 байтовым усилением для меня, что незначительно). Из того, что похоже, прицел подъемник дает наибольший потенциал для устаревших приложений с сотнями модулей, а не для разъема примерных проектов, таких как мой тест. Кажется, нет настоящего недостатка, чтобы использовать его, поэтому я все равно порекомендовал добавить его, если он не поднимает никаких ошибок. Развертывание блога пост объясняет эту функцию дальше.

Обновление AUG 2017 : дальнейшие улучшения были добавлены к прицелу подъема. Это функция The WebPack Core Team серьезно относится к и работает над улучшением еще дальше.

Результат : 🤷 Это простое добавление, без поставок, а потенциальная будущая выплата. Почему нет?

🖥 Пример 1: Примеры подъема ( Код просмотра )

2. Минификация и уважение

Стандартное восточное время. Время: 🕙 2 мин

Стандартное восточное время. Boost: 🚀🚀🚀.

Ульсификация была близким компаньоном для оптимизации, и никогда не было бы проще воспользоваться преимуществами, чем с WebPack. Это строит прямо в! Хотя это одна из самых доступных оптимизаций, для разработчика очень легко случайно забыть уфлизировать при отправке активов на производство. Лично я видел более одного комплекта WebPack-Counded с Un-Ulified Code в производстве. Таким образом, в нашем пути оптимизации это первая проверка, чтобы убедиться, что на месте.

Неправильный путь

Если вы новичок в Углификации, главное, что понять, это то, что разница в размере файла. Вот что происходит, когда мы бежим WebPack (без флагов) команду на нашем Пример Base App :

webpack

                       Asset       Size  Chunks                    Chunk Names
             index.bundle.js    2.46 MB       0  [emitted]  [big]  index

Правильный путь

2.46 МБ Отказ Отель! Если я проверю этот файл, он полон пробелов, разрывов линии и безвозмездные комментарии – все вещи, которые не нужно сделать его до производства. Чтобы исправить это, все, что нужно, это просто -П флаг:

webpack -p

Давайте посмотрим, как это -П Флаг влияет на нашу сборку:

                       Asset       Size  Chunks                    Chunk Names    
             index.bundle.js    1.02 MB       0  [emitted]  [big]  index

1.02MB Отказ Это снижение уровня 60%, И я не изменил ни одного кода; Мне нужно только набрать 2 дополнительных персонажей клавиатуры! WebPack’s -П Флаг коротко для «производства» и позволяет замирительностью и уважением, а также обеспечивает быстрые включения Различные улучшения производства Отказ

📝 Примечание

Несмотря на то, что это может показаться, -П Флаг делает не Установите переменную среды узла в Производство Отказ При работе на вашем компьютере вы должны запустить

NODE_ENV=production PLATFORM=web webpack -p

Стоит отметить, что некоторые библиотеки (React и Vue, чтобы назвать два) предназначены для опускания функций разработки и тестирования при включении в Производство приводя к меньшим размерам файлов и более быстрым временем запуска. Если вы запустите это на Пример проекта Индекс Bundle на самом деле выходит на 983 КБ а не 1.06MB Отказ На некоторых других установках не может быть никакой разницы в размере – это зависит от используемых библиотек.

💁 Совет

Для быстрой сборки добавить «Сценарии» Блок до Package.json так что вы или ваш сервер могут работать NPM запустить сборку Как ярлык:

"scripts": {
  "build": "webpack -p"
},

Расширенное урл

Настройка по умолчанию ULLIFY достаточно хороша для большинства проектов и большинства людей, но если вы хотите выжать каждое маленькое падение ненужного кода из ваших связке, добавьте WebPack.Optimize.uglifyjsplugin к вашему Производство Конфигурация WebPack:

plugins:[
  new webpack.optimize.UglifyJsPlugin({/* options here */}),
],

Для полного списка настроек UGLITYJS2 Документы являются самыми современными ссылками.

⚠️🐌 Построить предупреждение

Если вы случайно включите UGLICE в разработке, это значительно замедлит время сборки WebPack. Лучше всего оставить эту настройку только в производстве (см. Эта статья для получения инструкций о том, как настроить настройки производства WebPack).

Результат: В нашем примере мы выбросили 60% размера файла с UGLificate по умолчанию и минификацию. Неплохо!

🖥 Пример: Нет примера, но вы можете попробовать работать WebPack -P на Базовое приложение Отказ

3. Динамический импорт для ленивых модулей

Стандартное восточное время. Время: 🕙 15 мин

Стандартное восточное время. Boost: 🚀🚀🚀🚀🚀.

Динамический импорт это Корона драгоценности предельной разработки. Святой Грааль Отказ Потерянная дуга Отказ Храм гипю -Не, царапаясь, что последний; Я догнал название Индиана Джонс кино.

Независимо от фильма Harrison Ford, который вы сравниваете, динамично или ленивый Импорт – это огромное дело, потому что он без особых усилий достигает одного из центральных целей в перспективном развитии: загрузить вещи только тогда, когда им нужны, ни раньше, ни позже. По словам Скотт Джехл , «Больше веса не значит больше ожидания». Как вы доставляете свой код для пользователей (ленивый) важнее, чем сумма общий вес кода.

Давайте измеряем его влияние. Это WebPack -P на нашем Запуск приложения :

                       Asset       Size  Chunks                    Chunk Names    
             index.bundle.js    1.02 MB       0  [emitted]  [big]  index

У нас есть 1.02MB входа JS, который не незначительна. Но решающая проблема здесь не размер. Проблема в том, что Это доставлено как Один файл Отказ Это плохо, потому что Все ваши пользователи должны скачать весь пункт прежде чем они видят вещи на экране. Мы, безусловно, можем сделать лучше, нарушая этот файл вверх и позволяя рисуться раньше.

Динамический импорт, шаг 1: Babel Setup

Бабел и Динамический плагин импорта оба требования к этой работе. Если вы уже не используете Babel в своем приложении, вам понадобится это для всей всей этой функции. Для первых установок установки устанавливают Babel:

yarn add babel-loader babel-core babel-preset-env

и обновить свой webpack.config.js Файл, чтобы позволить Babel обрабатывать ваши файлы JS:

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader',
      exclude: /node_modules/,
    },
  ],
},

Как только это настроен, чтобы получить динамический импорт, работаю, установите плагин Babel:

yarn add babel-plugin-syntax-dynamic-import

а затем включите плагин, изменяя или создавая .babelrc Файл в вашем корне проекта:

{
  "presets": ["env"],
  "plugins": ["syntax-dynamic-import", "transform-react-jsx"]
}

Некоторые предпочитают добавлять варианты варианта в WebPack Нравится так Так что это в том же файле. Я просто предпочитаю отдельную .babelrc Файл для очистителя, уменьшенный конфигурация WebPack. В любом случае работает.

💁 Совет

В случае, если вы привыкли видеть ES2015 как предустановленная бабел, а не env Считайте переключение. env это простой конфиг, который может Автоматически транпильные функции на основе вашего Браузеры (Знаком пользователей AutoPrefixer для CSS).

Динамический импорт, шаг 2: Импорт ()

После того, как у нас есть Babel, мы расскажем о нашем приложении, что и где мы хотим лениться. Это так просто, как замена:

import Home from './components/Home';

с участием

const Home = import('./components/Home');

Не выглядит сильно по-другому, не делает это? Если вы когда-нибудь видели Требовать. Tensure раньше, что теперь стало устарено в пользу Импорт () Отказ

Некоторые рамки, такие как Vue Уже поддерживать это вне коробки. Однако с наших Пример приложения Приложение использует реагирование, нам нужно добавить крошечный контейнер под названием Реагистрационные кодовые расщепления Отказ Это сохраняет US ~ 7 строк кода React React на импорт и сделки с обновлением жизненного цикла рендеринга для нас. Но это не более чем синтаксический сахар, а основной функционал составляет 100% WebPack Импорт () Отказ Это то, что теперь выглядит наше приложение:

import React from 'react';
import Async from 'react-code-splitting';

const Nav = () => ();
const Home = () => ();
const Countdown = () => ();

Потому что WebPack оборачивается каждым Импорт () в динамический код разделен, теперь давайте посмотрим, как это пострадало WebPack -P :

                         0.bundle.js     222 kB       0  [emitted]         
                         1.bundle.js     533 kB       1  [emitted]  [big]  
                         2.bundle.js    1.41 kB       2  [emitted]         
                     index.bundle.js     229 kB       3  [emitted]         index

Это уменьшило нашу основную запись index.bundle.js Файл из 1.06MB к 229 КБ , 80% уменьшения размера! Это значимо, потому что Это наш входной файл Отказ Раньше картина не может произойти до этого 1.06MB Загружено завершено, анализируют и выполнено. Теперь нам нужно всего лишь 20% исходного кода для начала. И это относится к каждой странице на сайте! Это не технически Перевести на 5 × быстрый расчет краски более сложнее, чем это, но, тем не менее, удивительная скорость повышает время мало времени.

Конечно, это не может быть, там должна быть больше установка! Вы можете думать. Ты ошибаешься!

В нашем примере index.bundle.js Входной файл не изменил его имя, так что это еще единственный

Там тоже Mainesest.js Файл, который должен быть добавлен через

Теперь всякий раз, когда вы обновляете свой код приложения, пользователи должны будут выдавать только что 55,7 КБ Входной файл, а не все 174 КБ Отказ Это прочная победа в любой настройке приложения.

💁 Совет

При выборе модулей для поставщик пучок:

  • Ограничить его только модулям, все приложение использует
  • Также ограничьте его менее часто обновленным зависимостями (помните: если одно количество обновлений Lib Vendor, весь пакет будет загрузить)
  • Загрузите только общепригодные подмодулы. Например, если приложение использует «RXJS/наблюдаемый» Часто, но 'RXJS/планировщик' Редко, тогда только загружать первое. И все, что вы делаете, не загружайте все 'rxjs' !

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

🖥 Пример 5: Plugin Commons Chank ( Код просмотра )

6. Автономный плагин для WebPack

Стандартное восточное время. Время: 🕙 2 мин

Стандартное восточное время. Boost: 🚀🚀.

Вы когда-нибудь посещали сайт на своем мобильном телефоне, когда вы были в Spotty Data, и вы либо случайно запустили обновление, либо сам сайт вызвал обновление? Большое разочарование можно было избежать, если сайт, который уже полностью загружен, был лучше кэширован. К счастью, есть плагин WebPack, который стал скоплением в сообществе PWA: OfflinePlugin Отказ Только добавляя пару строки на ваш конфигурацию WebPack, теперь пользователи вашего сайта могут просматривать ваш сайт во время в автономном режиме!

Установите это:

yarn add offline-plugin

Добавьте его на свой конфигурацию WebPack:

const OfflinePlugin = require('offline-plugin');

module.exports = {
  entry: {
    // Adding to vendor recommended, but optional
    vendor: ['offline-plugin/runtime', /* … */],
  },
  plugins: [
    new OfflinePlugin({
      AppCache: false,
      ServiceWorker: { events: true },
    }),
  ],
};

И, где-то в вашем приложении (желательно в вашем файле ввода перед рендерингом кода):

/* index.js */

if (process.env.NODE_ENV === 'production') {
  const runtime = require('offline-plugin/runtime');

  runtime.install({
    onUpdateReady() {
      runtime.applyUpdate();
    },
    onUpdated() {
      window.location.reload();
    },
  });
}

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

Результат: Мы проверили, что Pesky «ответит на 200, когда в автономном режиме» требования в маяке всего за считанные минуты.

🖥 Пример 6: Автономный плагин ( Код просмотра )

7. Анализатор Bundle WebPack

Стандартное восточное время. Время: 🕙 10 мин

Стандартное восточное время. Boost: 🚀🚀🚀.

Из всех вариантов мы охватившим оптимизацию вашей сборки, это безусловно, минимум Автоматически, но также помогает поймать неосторожные ошибки, что автоматические оптимизации будут пропущены. В некоторых случаях вы Начать Оптимизация здесь, потому что, как еще вы можете оптимизировать свой пакет, если вы этого не понимаете? Добавить WebPack Bundle Analyzer , бегите пряжа добавьте --dev WebPack-Bundle-Analyzer В вашем репо, и добавьте его в свой Развитие Только конфигурация WebPack:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

config = { /* shared webpack config */ };

if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
  config.plugins = [
    ...config.plugins,
    new BundleAnalyzerPlugin(),
  ];
}

Обратите внимание на .Bundleanalyzerplugin. метод в конце требуется («WebPack-Bundle-Analyzer»). Bundleanalyzerplugin -Это довольно уникально

Запустите следующее, чтобы запустить анализатор Bundle на localhost: 8888 :

node_module/.bin/webpack --profile --json > stats.json
WebPack-Bundle-Rep.png

Здесь вы можете увидеть поломку всего вашего приложения, байта байта. Посмотрите внимательно на момент Раздел выше от Пример 7 Отказ Есть довольно несколько языков, связанных! Все они, чтобы быть точным. В то время как интернационализация - это замечательная вещь, мы еще не готовы к нему в нашем приложении приложения, поэтому нет никаких веских причин, по которой мы должны служить неиспользованным языкам клиенту.

                          Asset       Size  Chunks                    Chunk Names
      0.cc206a4187c30a32c54e.js     224 kB       0  [emitted]

Мы используем динамическое импорт, что отлично, но мы все еще в 224 КБ на наш момент кусок. Исследование немного, я нашел Это решение Это позволило мне использовать только местные меры.

WebPack-bundle-ash

По данным Bundle Analyzer, он выглядит намного меньше! Но давайте посмотрим, как выполнил наш окончательный пакет:

                           Asset       Size  Chunks                    Chunk Names
       0.4108c847bef03ae9e840.js    62.7 kB       0  [emitted]

Это вниз по 161 КБ Отказ Это довольно много экономии! Если бы мы никогда не управляли анализатором Bundle WebPack, мы, возможно, никогда не замечали все, что раздутые в нашем приложении, и просто приняли его в качестве веса зависимости. Вы можете удивить, насколько одна простая библиотека или одна перенасокообразная линия WebPack может сэкономить на вашем размере пучка!

С помощью Analyzer WebPack Bundle вы получаете несколько отличных намеков на то, где начать поиск возможностей оптимизации. Начните с крупнейших модулей в первую очередь и запустите свой путь, видя, если есть что-то, что вы можете оптимизировать по пути. Можете ли вы вишнеть (например, можно использовать требовать («RXJS/наблюдаемый») вместо требуют («RXJS») )? Можете ли вы заменить большие библиотеки с меньшими (например, своп реагировать с Preact )? Есть ли модули, которые вы можете бросить полностью? Задавать такие вопросы, как у них часто могут иметь большие выплаты.

Результат: Мы обнаружили довольно посмотрело в нашем приложении в нашем приложении, и смог сохранить 161 КБ на запрос на кусок. Определенно стоит нашего времени.

🖥 Пример 7: WebPack Bundle Analyzer ( Код просмотра )

8. Многофункциональный автоматический плагин Commonschunk

Стандартное восточное время. Время: 🕙 2 мин

Стандартное восточное время. Boost: 🚀.

Последняя оптимизация, которую мы осмотрим, это методика из первых дней WebPack, который, на мой взгляд, не так, как он когда-то был (если вы не согласны, пожалуйста, прокомментируйте - я хотел бы услышать, как вы его используете) Отказ Эта опция должна преследовать только в том случае, если ваше приложение соответствует всему следующим образом:

  • Содержит много, многие входные пакеты во всем приложении
  • Не могу воспользоваться Динамический импорт
  • Количество проприетарного кода далеко, далеко перевешивает библиотеки NPM и его разделены на модули ES6

Если ваше приложение не соответствует всем этим критериям, я бы порекомендовал вернуться в раздел 3. Динамический импорт и № 5. CommonschunkPlugin для кэширования поставщика. Если вы отвечаете всем требованиям, и это ваш единственный вариант, давайте поговорим о своих плюсах и минусах. Во-первых, предположим, что у нас есть следующие записи в нашем приложении (мы не используем примеры ранее, потому что это очень другую настройку):

module.exports = {
  entry: {
    main: './main.js',
    account: './account.js',
    shop: './shop.js',
  },
};

Мы можем обновить Commonschunk, чтобы просто понять вещи автоматически:

/* Dev & Production */
new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  minChunks: 2,
}),
/* Production */
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity,
}),

Единственная настройка на твик вот МИНЧУНКИ Отказ Это определяет, сколько пучков может появиться модуль, чтобы сделать Commons.js файл. Если библиотека появилась только в 1 из 3, она не сделала бы ее. Но как только два пакета требовали этого, теперь он будет удален из обоих модулей, так и в Commons.js Отказ

Опять же, это только работает, если вы не Воспользовавшись динамическими импортами. Потому что с динамическим импортом мы смогли разумно загружать на каждую страницу, только код, который пользователь нужен и ничего больше. Но с этим вариантом он несколько «тупой» в том смысле, что он не знает, что потребности пользователя на странице (плохо); Он просто связывает средний лучший файл Commons, основанный на предположении, пользователь ударит много страниц в вашем приложении (вероятно, не так). Кроме того, это не по-настоящему автоматически, как вам придется проверить и найти наиболее эффективную МИНЧУНКИ Установка на основе пользователя и архитектуры пользователя вашего приложения.

Результат: Неплохо, но лучше использовать динамический импорт (№ 3) и комминты поставщика (# 5)

Окончательный пример сбережений

Мы охватывали некоторые мощные новые способы, которыми вы сможете доставить ваш же опыт для пользователей, намного быстрее. Вот поломка того, сколько КБ мы сохранили на каждом шаге в нашем Пример приложения :

525 кб Базовое приложение 2,5 МБ. —
525 кб Прицел подъема 2,5 МБ. —
266 Кб Uglification Base App через WebPack-P 1 МБ + 50-60%
70 кб Динамический импорт 229 кб + 70-75%
— Детерминированные хэши — —
71 Кб Commons Chank Plugin † 230 Кб - 1%
— WebPack Offline Plugin — —
— WebPack Bundle Analyzer ‡ —

† Техника плагина Commons Chank разделить один файл ввода в 2, а Комбинированный размер обоих указан.

‡ Техника анализатора Bundle сохранена 161 Кб по конкретному запросу. Этот Это значительная экономия, даже если она не применяется к 100% пользователей.

Вы сможете включить некоторые методы в ваше приложение? Сделал твой Маяк Оценка улучшатся вообще? Вы ближе к этому неуловивному времени на 1 секунду? Или пропущены какие-либо оптимизации WebPack? Пожалуйста, оставьте комментарий!

Дальше чтение и отмечает

  • Google's Статьи о оптимизации ничего не хватает блестящего. Я не бегал через любой другой ресурс, который требует загрузки вашего сайта за 1 секунду, а затем предоставлять отличные предложения в достижении его. Если вы не уверены, как улучшить ваше приложение, модель Rail из этой ссылки - лучшее место для начала.
  • Маяк В случае, если вы пропустили предыдущие упоминания в статье, является текущим статусным quo из измерений производительности. Маяк очень похож на старый рейтинг PageSepeed Google или YLLOW, за исключением того, что он модернизируется для передовых веб-приложений в 2017 году и удерживает ваше приложение к последним стандартам.
  • WebPack сделал последние улучшения его Динамический импорт Документы, упомянующие обращение Vue Detting Импорт () Отказ Это увлекательно видеть столько улучшений в этом году!
  • Агрессивные функции WebPacksPlugin получают почетное упоминание здесь, ссылаются в Статья о WebPack & HTTP/2 автором WebPack. Плагин был изначально включен в эту статью, но после тестирования я нашел Динамический импорт Быть универсально лучшим решением, потому что он удаляет возможность ленивой нагрузки и требует 100%, чтобы подавать заранее. Он был разработан, чтобы постучать в параллельные возможности загрузки HTTP/2, но небольшой повышение из этого редко когда-либо смещает накладные расходы за загрузку всего приложения против минимальной необходимой суммы.
  • 10 вещей, которые я узнал сделать самый быстрый сайт в мире Давидом Гилберцон устанавливает еще один высокий стандарт для оптимизации. Неудивительно, что WebPack играет жизненно важную роль в достижении своих целей.
  • В центре внимания этой статьи были предельные характеристики, а не строят раз, но по теме все еще было несколько советов. Если вы следили за советом по сборке и борются с медленным WebPack --watch попробуйте использовать SEV Server WebPack вместо. Он строит в памяти и не пишет в файловую систему, сохраняя драгоценное время. Общая идея с этой стратегией состоит в том, чтобы использовать это для развития, и только пакет во время развертывания, пропуская - Удар полностью.

Читайте ещё по теме: