Pull to refresh

Оптимизация скриптов с Webpack SplitChunksPlugin

Reading time 2 min
Views 14K

В этой статье я бы хотел поделиться своим опытом по разбиению бандлов для многостраничного сайта с помощью Webpack 4. Cначала создадим для каждой страницы свою точку входа. Рассмотрим на примере 4 страниц:


const path = require("path");

const PATHS = {
  src: path.resolve(process.cwd(), "src"),
  dist: path.resolve(process.cwd(), "dist")
};

module.exports = {
  entry: {
    common: `${PATHS.src}/js/common`,
    index: `${PATHS.src}/js/index`,
    contacts: `${PATHS.src}/js/contacts`,
    about: `${PATHS.src}/js/about`,
  }
}

При сборке для каждой страницы будет создан свой бандл. В точку входа common я вынес общие скрипты для всех страниц. Чтобы подключить наши бандлы на страницы воспользуемся плагином Webpack'a HtmlWebpackPlugin.


Рассмотрим на примере:


  module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: `${PATHS.dist}/index.html`,
      template: `${PATHS.dist}/index.html`,
      chunks: ["index", "common"]
    })
    ...
  ]
  ...
};

В chunks указываем бандлы, необходимые для этой страницы (очередность: справа на лево). Таким образом на страницу будет подключены сначала общие скрипты, а потом скрипты необходимые отдельно для этой страницы.


Если мы имеем общие модули/сторонние библиотеки подключенные на разных страницах, создадим общие бандлы для этих страниц.


Воспользуемся Webpack плагином SplitChunksPlugin. Собственно вот конфигурация:


module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 1,
      minChunks: 2
    }
  }
}

После сборки мы получим бандлы отдельно для каждой странички и бандлы, которые делят между собой наши страницы.


index.js
contacts.js
common.js
about.js
vendors~about-us~index.js
vendors~about-us~contacts.js

В бандл vendors~about-us~index.js буду вынесены общие скрипты для about-us и index, которые закешируються браузером, и при переходе со страницы index на about будут уже скачены браузером, и потребуеться только загрузить бандл about.js.


Имена чанков можно изменить в конфиге этого плагина.


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


npm i --save-dev html-webpack-plugin@next

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


<script src="js/common.js"></script>
<script src="js/vendors~about-us~index.js"></script>
<script src="js/index.js"></script>
Tags:
Hubs:
+8
Comments 4
Comments Comments 4

Articles