Getting started

Решение на webpack 5

Для начала, необходимо явно указать, что мы хотим использовать Asset Modules. Для этого добавим в конфигурацию следующее:

На данный момент это экспериментальная фича и мы ждем от пользователей обратную связь по ее использованию.

После этого, достаточно просто пометить svg-файлы как и всё то, что было описано выше касаемо и — заработает само, из коробки, без каких-либо лоадеров:

Вот и всё, для файлов, которые попадают под правило с будет применяться следующая логика: Если файл меньше 8кб (по умолчанию), то встроить его в собранный бандл, в ином случае поместить его в директорию с собранным бандлом.
Свойство так же учитывается.

Помимо есть и другие встроенные типы модулей.

asset/inline

Это аналог . Файлы, которые будут подпадать под правило с будут всегда инлайниться в бандл в виде data-url:

Более того, для можно задавать кастомный генератор data-url.
Например, для svg-файлов можно использовать , который инлайнит svg как data-url, но без использования base64, что позволяет уменьшить размер встроенного фрагмента:

В результате получим такой css:

Таким образом можно совмещать использование лоадеров и кастомное поведение для генерирования data-url.

asset/resource

Это аналог file-loader. Файлы, которые будут подпадать под правило с будут складываться в директорию с бандлом:

Указываем путь

По умолчанию, модули с типом складываются в директорию, которую вы указываете в (по умолчанию ), но при помощи можно переопределить это поведение:

Вывод:

А заменив на мы получим прекрасный вариант для long term caching:

Вывод:

Более того, мы можем переопределить имя выходного файла для конкретного asset-правила. Например, можно складывать svg-иконки в директорию , а остальные asset-модули в директорию :

Вывод:

asset/source

Это аналог raw-loader. Файлы, которые будут подпадать под правило с будут всегда инлайниться в бандл в неизменном виде:

Вывод:

asset

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

Лимит для применения можно установить:

Подводя итог: Asset Modules в webpack 5 позволяют отказаться от некоторых привычных лоадеров за счет поддержки их функциональности «из коробки».
Полноценный пример можно посмотреть здесь.

Установка и настройка Webpack

Вебпак можно установить при помощи менеджера пакетов, например, npm.

npm install --save-dev webpack

Базовые понятия

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

1. Entry – вход
2. Output – вывод
3. Loaders – загрузчики
4. Plugins – плагины

Entry

Под Entry (вход) подразумевается точка входа (entry point), которую Вебпак будет использовать для построения внутреннего графа зависимостей. После ввода точки входа Вебпак сможет понять, какие модули и библиотеки напрямую и не напрямую связываются.

В результате каждая зависимость превращается в файлы, которые называются бандлами («bundles» можно перевести как пакеты или узлы).

Пример простейшей конфигурации entry:

webpack.config.js

module.exports = {

  entry: './path/to/my/entry/file.js'

};

Output

Output (вывод) указывает на то, где вебпак должен размещать сборку созданных бандлов и как он будет называть эти файлы (по умолчанию это ./dist). Настроить эту часть процесса можно в поле output в конфигурации:

webpack.config.js

const path = require('path');

module.exports = {

  entry: './path/to/my/entry/file.js',

  output: {

path: path.resolve(__dirname, 'dist'),

filename: 'my-first-webpack.bundle.js'

  }

};

В этом примере output.filename отвечает за имя файла, а output.path – за директорию, в которой будет находиться сборка.

Loaders

Загрузчики (лоадеры) позволяют Вебпаку обрабатывать не только файлы JavaScript, т.к. сам по себе бандлер понимает только JS.

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

Использование загрузчиков имеет две цели:

1. Свойство test определяет, какие файлы должны быть трансформированы.
2. Свойство use указывает, какой загрузчик должен использоваться для выполнения трансформации.

Пример конфигурации:

const path = require('path');

const config = {

  output: {

filename: 'my-first-webpack.bundle.js'

  },

  module: {

rules: [

 { test: /\.txt$/, use: 'raw-loader' }



  }

};

module.exports = config;

Здесь определяются правила (rules) для конкретного модуля и используются свойства test и use. Компилятор Вебпака поймет, что когда он дойдет до файла «.txt» в require()/import, перед добавлением в бандл ему нужно будет использовать загрузчик raw-loader.

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

Plugins

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

Для того чтобы использовать плагин, необходимо использовать require() и добавить его в массив плагинов. Большинство плагинов можно кастомизировать через настройки. Так как один плагин может использоваться несколько раз для разных целей, необходимо создать несколько отдельных экземпляров, использовав оператор new.

Много плагинов поставляются сразу с Webpack из коробки. Их список можно найти здесь.

Modules

The and statements have been standardized in ES2015. They are supported in most of the browsers at this moment, however there are some browsers that don’t recognize the new syntax. But don’t worry, webpack does support them out of the box.

Behind the scenes, webpack actually «transpiles» the code so that older browsers can also run it. If you inspect , you might be able to see how webpack does this, it’s quite ingenious! Besides and , webpack supports various other module syntaxes as well, see Module API for more information.

Note that webpack will not alter any code other than and statements. If you are using other ES2015 features, make sure to such as Babel or Bublé via webpack’s loader system.

Создание первых javascript-модулей

Создадим папку «source» и в ней 2 javascript-файла «index.js» и «menu.js».

PHP

mkdir source
touch source/{index.js,menu.js}

1 2	mkdirsource touchsource{index.js,menu.js}

В файл menu.js мы поместим функцию, которая будет создавать список пунктов меню. Эта функция принимает 2 параметра: первый — массив пунктов меню, второй — класс, который нужно присвоить тегу ˂ul˃. После вызова данная функция будет возвращать html-элемент, а именно ненумерованный список, правда, без ссылок. Вы можете усовершенствовать эту функцию самостоятельно, однако в наших целях простого списка будет вполне достаточно.

PHP

export default function (array, className) {
var menu = document.createElement(«ul»);
menu.className = className;
var listItems = »;
array.forEach(function(item) {
listItems += ‘
<ul>
<li>’ + item + ‘</li>
</ul>
 

‘;
});
menu.innerHTML = listItems;
return menu;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

export defaultfunction(array,className){ varmenu=document.createElement(«ul»); menu.className=className; varlistItems=»; array.forEach(function(item){ listItems+=’ <ul> <li>’+item+'</li> </ul> ‘; }); menu.innerHTML=listItems; returnmenu; }

Кстати, перед нами самый настоящий ES6-модуль — изолированный и аккуратный код, который можно использовать из проекта в проект, если будет необходимо. Необходимо отметить, что поддержка ES6-модулей появилась в Webpack начиная со второй версии, т.е. нам нет необходимости подключать babel в данном случае. Всё и так будет работать.

Ключевое слово export, стоящее перед объявлением функции, экспортирует данную функцию в остальную часть приложения. Ключевое слово default говорит о том, что мы экспортируем только одно значение, по умолчанию.
Если это пока для вас сложно, не волнуйтесь. Вы достаточно быстро привыкнете.

Следующий модуль index.js. В него мы импортируем функцию переданную во вне по умолчанию из menu.js и сразу присваиваем ей имя “createMenu”. При этом мы можем не указывать “.js” — webpack и так поймёт, что мы имеем ввиду.

Давайте создадим меню, состоящее из 3х пунктов …. Для удобства стилизации присвоим меню класс «menu».

PHP

import createMenu from ‘./menu’;
var menu = createMenu(, ‘menu’);
document.body.appendChild(menu);

1 2 3

import createMenu from’./menu’; varmenu=createMenu(‘Главная’,’Обо мне’,’Портфолио’,’menu’); document.body.appendChild(menu);

Настройка Webpack с помощью файла webpack.config.js

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

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

Если в файле конфигурации изменить путь вывода на что-то вроде  , то при повторном выполнении команды пакетный файл будет помещён в  (Commit 5).

Файл конфигурации предназначен не только для настройки расположения входных и выходных файлов. Также можно настроить что именно Webpack делает, когда встречает файлы разных типов, используя специальные загрузчики, которые на самом деле являются JavaScript-программами, преобразующими ваш код. Например, в файле конфигурации может быть правило, определяющее, что, если Webpack встречает файл TypeScript в своём графе зависимостей, этот файл отправляется в загрузчик, который преобразует его из TypeScript в обычный JavaScript.

Загрузчик, который будет использоваться далее, — это Babel. Если вы не использовали его раньше, Babel — это инструмент, который берёт код JS, использующий современные функции, и преобразует его в эквивалент, совместимый со старыми версиями JavaScript. Это позволяет вашему приложению работать в старых браузерах или в браузерах, которые ещё не поддерживают некоторые новые функции JavaScript. В конце концов, некоторые ленивцы не обновляли свои браузеры с 2009 года. Некоторая часть написанного кода не будет работать в браузере 2009 года:

Здесь используется стрелочная функция и старые браузеры её не воспринимают. Поэтому используем загрузчик и отправим эту функцию в прошлое. Для начала выполним следующее:

Затем в файле добавим следующий код в :

Этот код добавит новое правило в ваш Webpack. Если в дереве зависимостей Webpack встречает файл, который заканчивается на (например, ), и этот файл отсутствует в папке (например, jQuery), то к этому файлу применяется данное правило.

Любой файл, который соответствует этому правилу, проходит через все загрузчики в блоке (в данном случае только через загрузчик babel). Таким образом, файлы и пройдут через загрузчик, что приведёт к удалению стрелочной функции в , а затем Webpack продолжит свой путь сборки. Тем временем, как только Webpack встречает jQuery, он просто загружает этот код как он есть без загрузчиков, поскольку jQuery находится в каталоге .

Теперь, если выполнить и посмотреть исходный код в , фрагмент, соответствующий вашей функции сортировки, использует ключевое слово , а не стрелочную функцию (Commit 6).

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

Обратите внимание на то, как выше мы используем стрелочную функцию, а ниже присутствует уже знакомое браузеру 2009 года ключевое слово

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

Создание приложения

В качестве тестового приложения мы сделаем карту для ленивцев, которая поможет найти магазины в Кембридже, где продают травяной чай из гибискуса. Потому что каждый ленивец в кембриджском заповеднике Fresh Pond знает, что чай из гибискуса — лучший чай, чтобы умерить свой горячий темперамент!

Прим.: на самом деле в заповеднике Fresh Pond не обитают ленивцы, но они правда любят вкусные цветы гибискуса после долгого дня, проведённого на деревьях.

здесь

Основная структура приложения будет выглядеть так:

У вас есть файл app/src/distance.js, экспортирующий функцию, которая запускает формулу вычисления расстояния (на самом деле нужно использовать ортодому) и функцию, которая сообщает, какая точка из массива точек ближе всего находится.

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

И, наконец, у вас есть страница index.html.

Общая структура каталогов такова:

Таким образом, файл определяет функции расстояния, затем файл запускает их, помещая результат функции в дерево документов (DOM). Но если посмотреть на зависимость между файлами, то видно, что файл зависит от файла , а не наоборот (Commit 2).

Sponsoring

Most of the core team members, webpack contributors and contributors in the ecosystem do this open source work in their free time. If you use webpack for a serious task, and you’d like us to invest more time on it, please donate. This project increases your income/productivity too. It makes development and applications faster and it reduces the required bandwidth.

This is how we use the donations:

• Allow the core team to work on webpack
• Thank contributors if they invested a large amount of time in contributing
• Support projects in the ecosystem that are of great value for users
• Support projects that are voted most (work in progress)
• Infrastructure cost
• Fees for money handling

Rule.use

can be an array of which are applied to modules. Each entry specifies a loader to be used.

Passing a string (i.e. ) is a shortcut to the loader property (i.e. ).

Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured).

webpack.config.js

can also be a function which receives the object argument describing the module being loaded, and must return an array of items.

The object parameter has the following fields:

• : The current webpack compiler (can be undefined)
• : The path to the module that is importing the module being loaded
• : Always the path to the module being loaded
• : The path to the module being loaded, it is usually equal to except when the resource name is overwritten via in request string

The same shortcut as an array can be used for the return value (i.e. ).

webpack.config.js

See for details.

Prevent Duplication

Entry dependencies

The allows to share the modules between the chunks:

webpack.config.js

If we’re going to use multiple entry points on a single HTML page, is needed too, otherwise we could get into trouble described here.

webpack.config.js

And here’s the result of build:

As you can see there’s another file generated besides , and .

Although using multiple entry points per page is allowed in webpack, it should be avoided when possible in favor of an entry point with multiple imports: . This results in a better optimization and consistent execution order when using script tags.

The allows us to extract common dependencies into an existing entry chunk or an entirely new chunk. Let’s use this to de-duplicate the dependency from the previous example:

webpack.config.js

With the configuration option in place, we should now see the duplicate dependency removed from our and . The plugin should notice that we’ve separated out to a separate chunk and remove the dead weight from our main bundle. Let’s do an to see if it worked:

Here are some other useful plugins and loaders provided by the community for splitting code:

mini-css-extract-plugin: Useful for splitting CSS out from the main application.

Как работает Webpack

В любом веб-проекте есть файлы HTML, CSS, JavaScript, ресурсы, как шрифты, изображения и т.д. Таким образом, рабочий процесс webpack включает в себя настройку файла index.html с соответствующими ссылками на CSS, JavaScript и необходимые ресурсы.

При выполнении задач webpack опирается на конфигурацию. Они прописаны в файле webpack.config.js. В нем указано, как файлы и ресурсы следует трансформировать.

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

Если модуль содержит зависимости, процесс выполняется рекурсивно для каждой зависимости. Затем webpack объединяет все модули проекта в небольшое количество бандлов (обычно только один), чтобы их можно было загрузить в браузер.

Собираем JavaScript

Так как Webpack создан в первую очередь для сборки js файлов, то эта часть будем самой простой. Чтобы можно было писать javascript в современном виде ES2015, который не поддерживается браузерами, поставим пакеты , , .

После создаем файл настроек с таким содержимым:

В разделе (точки входа) указываем, какой js файл будем собирать, в разделе указываем путь в папке , куда будем помещаться собранный файл

Обратите внимание, что в webpack 4 в пути саму папку указывать не нужно! И да, как же мне не нравится, что в одном файле webpack в одних случаях нужно писать относительный путь, в других случаях относительный путь в специальной папке, в третьих случаях нужен уже абсолютный путь (например, его получаем этой командой )

Также указано значение параметра , равное: , что позволит создавать карты исходников для js и css файлов.

Для обработки конкретных файлов (по расширению, по месторасположению) в webpack создаются правила в разделе . Сейчас у нас там стоит правило, что все js файлы пропускаем через транслятор Babel, который преобразует наш новомодный ES2015 в стандартный javascript вариант, понятный браузерам.

В нашем тестовом примере мы верстаем наши странице на Boostrap 4. Поэтому нам нужно будет установить три пакета: , , . Второй и третий пакет мы устанавливаем по требованию Bootstrap.

Обратите внимание на то, что эти три пакета нам нужны именно для самого сайта, а не для его сборки. Поэтому эти пакеты мы устанавливаем с флагом , а не

Теперь можно приступить к написанию нашего файла:

В качестве примера пользовательского кода js просто перекрасили цвет текста на синий.

Теперь можно перейти к сборке js файла. Для этого в файле в разделе пропишем следующие npm скрипты:

Теперь при запуске в командной строке строчки npm run dev произойдет сборка проекта (css и html файлы потом также будут собираться этой командой), и в папке появятся файлы и .

При запуске команды npm run build также произойдет сборка проекта, но уже итоговая (с оптимизацией, максимальной минимизацией файла), которую можно выкладывать на хостинг.

При запуске npm run watch запускается режим автоматического просмотра изменений файлов проекта с автоматическим допостроением измененных файлов. Да, чтобы в командной строке отключить этот режим (например, чтобы можно было написать другие команды) можно нажать (как минимум в PowerShell).

При запуске npm run start запустится локальный сервер, который запустит html страницу и также будет отслеживать изменения в файлах. Но пока этой командой не пользуемся, так как сборку html страниц не добавили.

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

Update 2018.04.11. Пришлось отказаться от . Почему? Когда запускаешь сервер через команду (), то webpack компилирует файлы автоматом, не сохраняя их в папку . И это нормально. Но при этом папка очищается из-за наличия . В результате в режиме работы локального сервера папка пустует, что негативно сказывается на работе с git (только в случае, если вы в git репозиторий сохраняется сборку проекта, как и я): после каждого запуска сервера появляется куча изменений из-за удаленных файлов. Было бы хорошо, чтобы очистка папки происходила только при полноценной сборке, например, (об этой команде ниже). Плагин настроить нужным способом не смог. Поэтому использую другой плагин , который не связан с webpack и работает отдельно.

Внесем изменения в файл .

Создаём html-файлы при помощи html-webpack-plugin

Для создания html-файлов и работы с шаблонами мы будем использовать плагин html-webpack-plugin.
Установим плагин при помощи Yarn. Не забудем флаг -D, чтобы зависимость была сохранена в devDependencies файла-манифеста. Туда же, где сохранён вебпак.

PHP

yarn add html-webpack-plugin -D

1	yarn add html-webpack-plugin-D

В webpack.config.js мы поместим следующий код. Я сэкономлю ваше время, сейчас и далее я не буду тратить время на тайпинг. Вместо этого постараюсь объяснить уже набранный код.

PHP

const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

const PATHS = {
source: path.join(__dirname, ‘source’),
build: path.join(__dirname, ‘build’)
};

module.exports = {
entry: PATHS.source + ‘/index.js’,
output: {
path: PATHS.build,
filename: ‘.js’
},
plugins:
};

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

constpath=require(‘path’); constHtmlWebpackPlugin=require(‘html-webpack-plugin’); constPATHS={ sourcepath.join(__dirname,’source’), buildpath.join(__dirname,’build’) }; module.exports={ entryPATHS.source+’/index.js’, output{ pathPATHS.build, filename’.js’ }, plugins newHtmlWebpackPlugin({ title’Webpack app’ }) };

Пояснения:

— “сonst” — это ES6-альтернатива для “var”, указывающая, что переменная не должна быть изменена. Node.js полностью поддерживает эту часть ES6, т.е. в данном случае я также могу обойтись без babel.

— “path” — это базовый модуль node.js, который поможет нашему приложению работать корректно (одинаково) на разных платформах (например, windows или linux), т.к. они по разному определяют пути к файлам.

— “PATH” — объект, в который мы поместили 2 свойства: “source” — исходники приложения и “build” — папка, в которую будут помещаться результаты работы Webpack.

— “module.exports” — экспорт модуля в node.js. Внутри него мы пишем такие настройки Webpack, как entry, output, plugins и пр.

— “entry” — точка входа нашего приложения. Для многостраничного сайта можно сделать отдельные точки входа для каждой страницы. Запомните, что точками входа могут являться только те модули, которые не используются другими модулями вашего приложения. Так, например, наш модуль index.js использует другой модуль — menu.js. Но сам index.js не используется больше никаким модулем.

— “output” — описывает имена файлов и директорию — результат работы Webpack.

— “” — это плейсхолдер, в него автоматически будут подставляться имена точек входа “entry” нашего приложения. А у нас их будет несколько. Но об этом позже.

— “plugins” — в этом разделе перечисляются плагины, которые кастомизируют процесс сборки Webpack. В нашем случае, это всего один плагин, который создает HTML-файл с заданным тайтлом.

Работа со скриптами

Мы рассмотрим, как перенести ES6 в ES5-совместимый код, который работает во всех браузерах. Начнем с выполнения приведенной ниже команды:

npm run dev -- --devtools false

Затем откроем файл main.bundle.js:

/***/ "./src/component.js":
/*!**************************!*
  !*** ./src/component.js ***!
  **************************/
/*! обеспечение экспорта: по умолчанию */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* экспорт по умолчанию */ __webpack_exports__ = ((text = "Hello webpack") => {
  const element = document.createElement("p");

  element.innerHTML = text;

  return element;
});

/***/ })

Современные функции из стандарта JavaScript ES6 (стрелочная функция и объявление const) из модуля component.js по умолчанию не преобразованы в ES5-совместимый код. Чтобы код работал в более старых браузерах, необходимо добавить загрузчик Babel:

npm install babel-loader @babel/core @babel/preset-env --save-dev

Затем в файле webpack.config.js добавьте module после свойства output:

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
},

При определении правил для загрузчика webpack нужно установить три основных свойства:

• test – описывает, какие файлы следует трансформировать.
• exlude – определяет, какие файлы из загрузчика не следует обрабатывать.
• use – указывает, какой загрузчик следует использовать для сопоставленных модулей.

Еще раз введите приведенную ниже команду:

npm run dev -- --devtools false

На этот раз код в файле main.bundle.js компилируется в следующий:

/***/ "./src/component.js":
/*!**************************!*
  !*** ./src/component.js ***!
  **************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* экспорт по умолчанию */ __webpack_exports__ = (function () {
  var text = arguments.length > 0 && arguments !== undefined ? arguments : "Hello webpack";
  var element = document.createElement("p");
  element.innerHTML = text;
  return element;
});

/***/ })

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

Prefetching/Preloading modules

webpack 4.6.0+ adds support for prefetching and preloading.

Using these inline directives while declaring your imports allows webpack to output “Resource Hint” which tells the browser that for:

• prefetch: resource is probably needed for some navigation in the future
• preload: resource will also be needed during the current navigation

Simple prefetch example can be having a component, which renders a component which then on demand loads a component after being clicked.

LoginButton.js

This will result in being appended in the head of the page, which will instruct the browser to prefetch in idle time the file.

Preload directive has a bunch of differences compared to prefetch:

• A preloaded chunk starts loading in parallel to the parent chunk. A prefetched chunk starts after the parent chunk finishes loading.
• A preloaded chunk has medium priority and is instantly downloaded. A prefetched chunk is downloaded while the browser is idle.
• A preloaded chunk should be instantly requested by the parent chunk. A prefetched chunk can be used anytime in the future.
• Browser support is different.

Simple preload example can be having a which always depends on a big library that should be in a separate chunk.

Let’s imagine a component which needs a huge . It displays a when rendered and instantly does an on demand import of :

ChartComponent.js

When a page which uses the is requested, the charting-library-chunk is also requested via . Assuming the page-chunk is smaller and finishes faster, the page will be displayed with a , until the already requested finishes. This will give a little load time boost since it only needs one round-trip instead of two. Especially in high-latency environments.