Оптимизация

Минимизация

Для минимизации ваших скриптов (и вашего CSS, если вы используете css-loader) webpack поддерживает простой параметр:

--optimize-minimize соответственно new webpack.optimize.UglifyJsPlugin()

Это простой, но эффективный способ оптимизации вашего веб-приложения.

Как вы уже знаете (если вы прочитали оставшуюся документацию), webpack присваивает идентификаторы модулям и чанкам для их идентификации. Webpack может изменять распределение идентификаторов, чтобы получить наименьшую длину идентификаторов для часто используемых идентификаторов с помощью простого параметра:

--optimize-occurrence-order соответственно new webpack.optimize.OccurrenceOrderPlugin()

Чанки входа имеют более высокий приоритет по размеру файла.

Дедупликация

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

--optimize-dedupe соответственно new webpack.optimize.DedupePlugin()

Эта функция добавляет некоторую нагрузку на чанк входа.

Чанки

При написании кода вы, возможно, уже добавили множество точек разделения кода для загрузки содержимого по требованию. После компиляции вы можете заметить, что слишком много чанков слишком малы, создавая большую нагрузку на HTTP. К счастью, Webpack может обрабатывать ваши чанки после компиляции, объединяя их. Вы можете предоставить два параметра:

• Ограничить максимальное количество чанков с помощью --optimize-max-chunks 15 new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15})
• Ограничить минимальный размер чанка с помощью --optimize-min-chunk-size 10000 new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})

Webpack позаботится об этом, объединяя чанки (он предпочтет объединять чанки, имеющие дублируемые модули). Ничего не будет объединено в чанк входа, чтобы не повлиять на время первоначальной загрузки страницы.

Одностраничное приложение

Одностраничное приложение — это тип веб-приложения, для которого оптимизирован webpack.

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

Если вы используете API истории HTML5 для отображения текущей страницы содержимого в URL, ваш сервер может знать, какая страница содержимого будет запрошена кодом клиента. Чтобы сохранить запросы к серверу, вы можете включить чанк содержимого в ответ: это возможно, просто добавив его как тег script. Браузер загрузит оба чанка параллельно.

<script src="entry-chunk.js" type="text/javascript" charset="utf-8"></script>
<script src="3.chunk.js" type="text/javascript" charset="utf-8"></script>

Вы можете извлечь имя файла чанка из статистики. (stats-webpack-plugin можно использовать для экспорта статистики сборки).

Многостраничное приложение

При компиляции (реального) многостраничного приложения вы хотите совместно использовать общий код между страницами. На самом деле это очень легко сделать с помощью webpack: просто скомпилируйте с несколькими точками входа:

webpack p1=./page1 p2=./page2 p3=./page3 [name].entry-chunk.js

module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3"
    },
    output: {
        filename: "[name].entry.chunk.js"
    }
}

Это сгенерирует несколько чанков входа: p1.entry.chunk.js, p2.entry.chunk.js и p3.entry.chunk.js. Но дополнительные чанки могут быть общими для них.

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

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3"
    },
    output: {
        filename: "[name].entry.chunk.js"
    },
    plugins: [
        new CommonsChunkPlugin("commons.chunk.js")
    ]
}

Это сгенерирует несколько чанков входа: p1.entry.chunk.js, p2.entry.chunk.js и p3.entry.chunk.js, плюс один commons.chunk.js. Сначала загрузите commons.chunk.js, а затем один из xx.entry.chunk.js.

Вы можете сгенерировать несколько общих чанков, выбрав чанки входа. И вы можете вложить общие чанки.

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3",
        ap1: "./admin/page1",
        ap2: "./admin/page2"
    },
    output: {
        filename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
        new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
    ]
};
// <script>s required:
// page1.html: commons.js, p1.js
// page2.html: commons.js, p2.js
// page3.html: p3.js
// admin-page1.html: commons.js, admin-commons.js, ap1.js
// admin-page2.html: commons.js, admin-commons.js, ap2.js

Дополнительный совет: вы можете выполнить код внутри общего чанка:

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        commons: "./entry-for-the-commons-chunk"
    },
    plugins: [
        new CommonsChunkPlugin("commons", "commons.js")
    ]
};

См. также пример multiple-entry-points и пример advanced multiple-commons-chunks.