Vylepšený code splitting ve Webpacku 5

Article in English can be found on dev.to/arxeiss/enhanced-code-splitting-with-webpack-5-3af3

V prosinci 2018 byla vydána první alpha verze Webpacku 5. Na konci roku 2019 lidé psali: "Webpack 5 je po roce tady!". Je říjen 2020 a venku je stále jen release candidate. Každopádně to nebrání využívat některé nové funkcionality, převážně pokud jsou tak super, jako Code Splitting.

Ve webpacku 4 byla přepracována optimalizace pro vytváření chunků pro rozdělování kódu. Ta možnost je tu stále a je velmi dobře popsána ve videu na YouTube. Chunky se dobře hodí pro Single Page App, kde častěji dochází k úpravě kódu aplikace, nikoli však knihoven.

Rozdělení podle entry pointů

V systému pro lyžařskou školu používám Bootstrapu 4 a navíc Datatables, EasyMDE a z historických důvodů Magnific popup. Pro nepřihlášené návštěvníky stačí načíst základní JS s Bootstrapem. Až pro přihlášené rodiče, kteří tvoří 85 % uživatelů, je potřeba načíst DataTables. Pro zbylých 15 % uživatelů se načítají i ostatní knihovny, ale pouze na stránkách, kde jsou opravdu potřeba. Proto jsem chtěl mít kód rozdělen trochu jinak, než jen app.js a vendors.js.

Nastavení code-splittingu spočívá ve vytvoření více entry pointů a určení jejich závislostí. Je to velmi jednoduché a kód je rozdělen přesně, jak si vývojář určí. Tato nová metoda lze kombinovat se Split chunks pluginem, který je stále dostupný a hodí se na trochu něco jiného. Viz odkaz na video výše. Detailnější popis je v komentářích přímo v kódu níže.

const path = require('path');

module.exports = {
  entry: {
    // Výsledný soubor vendors.js obsahuje pouze jQuery a popper.js
    'public/js/vendors': ['jquery', 'popper.js'],
    // main.js obsahuje vše, co je v něm importováno, tj i Bootstrap a další knihovny
    // Neobsahuje ale nic, co již je ve vendors.js, protože na něm závisí
    'public/js/main': {
      import: './resources/assets/js/main.js',
      dependOn: 'public/js/vendors',
    },
    // DataTables jsou závislé na main.js
    // Vše co již je obsaženo ve vendors.js nebo main.js nebude znovu přiloženo
    'public/js/datatables': {
      import: './resources/assets/js/datatables.js',
      dependOn: 'public/js/main',
    },
    // Magnific popup načítá pouze jQuery, proto stačí závislost na vendors.js
    'public/js/magnific-popup': {
      import: './resources/assets/js/magnific-popup.js',
      dependOn: 'public/js/vendors',
    },
    // EasyMDE neobsahuje žádné závislosti obsažené v některém z dřívějších souborů
    'public/js/easymde': './resources/assets/js/easymde.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './'),
    publicPath: '/',
    ecmaVersion: 5,
  },
};

Pozor na správnou verzi

Při instalaci pomocí npm i webpack dojde k nainstalování Webpacku v4! Opravdu zajímavé je, že při otevření dokumentace je zobrazena dokumentace pro verzi 5. Pro nainstalování RC verze 5 je nutné zadat npm i webpack@next.

---

Zkušenosti s Webpackem nebo přímo Code Splittingem můžete sdílet v komentářích.