Webpack řeší bundlování moderních Javascriptových aplikací pro prohlížeč. Podíváme se na srovnání s automatizačními nástroji Grunt a Gulp a na některé pokročilé featury jako je long-term cache nebo code splitting.

1. JAK TO (NE)ZABALIT
S WEBPACKEM
@JIRIPOKORNY
SKRZ.CZ

2. CO JE
WEBPACK?

3. K ČEMU SLOUŽÍ WEBPACK?
▸ distribuce Javascriptových aplikací se stala
obtížnou
▸ Gulp/Grunt neumí vytvářet balíky (bundles)
▸ module bundlery: Webpack (Browserify, Rollup…)

4. PROČ SI ZVOLIT WEBPACK?
▸ hot module replacement = lepší livereload
▸ cachování
▸ chytrý code splitting
▸ tree shaking pro ES6

5. RYCHLOKURZ WEBPACKU
▸ entry point
▸ začátek bundle procesu
▸ obsahuje moduly (Javascripty, obrázky, fonty…)
▸ loadery = transformace modulů
▸ output bundle = konec procesu
▸ bundle rozdělujeme do chunků

6. CACHOVÁNÍ

7. PROČ CACHOVAT?
SKRZ.CZ NA „ ČESKÉM 3G"
Time Requests Bytes In
First view 18.447s 86 1,395 KB
Repeated
view
3.887s 18 110 KB

8. CACHOVÁNÍ
▸ „nekonečná” platnost cache
▸ cache potřebujeme invalidovat → hashování
▸ ve Webpacku poměrně složitý problém,
připravte se na dlouhé večery s Github issues

9. CACHOVÁNÍ KROK ZA KROKEM
▸ oddělit JS a CSS entry pointy
▸ odstranit nepotřebné závislosti z JS
(pozor na file-loader)
▸ zapnout hashování – pozor na zvolenou metodiku!
output: {
filename: "[name].[chunkhash].js",
chunkFilename: "[name].[chunkhash].js"
}
▸ vytvořit „asset manifest”
▸ pozor na HTML cache, e-maily apod.

10. CODE
SPLITTING

11. PROČ CODE SPLITTING?
▸ chceme zrychlit first render time
▸ těžíme z cachování → invalidujeme jen část kódu

12. CODE SPLITTING – KDE ZAČÍT?
1. Vytvořit Webpack stats
webpack —profile —json > stats.json
2. Analyzovat
(Webpack Visualiser)

13. CODE SPLITTING
▸ split pointy
▸ rozdělují kód na chunky
▸ Webpack statickou analýzou oddělí moduly
definované ve split pointu
▸ v React.js se nabízí code splitting podle routes
▸ oddělení knihoven a aplikace

14. WEBPACK VS. GRUNT/GULP
▸ není to buď a nebo → možná integrace
(webpack-stream)
▸ Webpack řeší běžné úlohy out of the box, méně
„boilerplate” kódu
▸ všechno je modul, větší kontrola nad buildem
(srovnej Webpack gulp-responsive vs. responsive-
loader)

15. KAM DÁL?
▸ http://survivejs.com/webpack/introduction/
▸ https://presentations.survivejs.com/advanced-webpack
▸ https://blog.madewithlove.be/post/webpack-your-bags/
▸ https://medium.com/@okonetchnikov/long-term-caching-
of-static-assets-with-webpack-1ecb139adb95
▸ https://webpack.github.io/docs/list-of-loaders.html

16. DĚKUJI ZA POZORNOST
@JiriPokorny