15. code splitting WEBPACK
+ get only what you need
- many requests => much overhead
- request latency
+ one request, less latency
- get all bunch
REQUEST PER MODULE ALL IN ONE REQUEST
to organize modules as chunks
15
16. WEBPACK
+ get only what you need
+ less requests, less overhead
MODULES TO CHUNKS
code splittingto organize modules as chunks
16
23. rich plugin system WEBPACK
to get inside the process
wanna some
dependency injection
bower modules
uglified javascript with sourceMaps
?smart chunks loading
23
30. rich plugin system WEBPACK
to get inside the process
smart common chunks extraction
p1.entry.chunk.js
p2.entry.chunk.js
p3.entry.chunk.js
common.chunk.js
30
31. rich plugin system WEBPACK
to get inside the process
list of plugins
20+
31
32. dev tools and other stuff WEBPACK
to make work fun and easy
- DEV SERVER
- HOT MODULE REPLACEMENT
- DEPENDENCIES VISUALIZATION
32
33. dev tools and other stuff WEBPACK
to make work fun and easy
33
34. COMPARISON
feature WEBPACK RequireJS Browserify
CommonJS yes wrapping in yes
AMD yes yes no
Chunks on demand yes yes no
expressions in require
yes no no
Runtime overhead
243b + 20b per module + 4b
per dependency
14.7kb + 0b per module + (3b +
X) per dependency
415b + 25b per module +
(6b + 2X) per dependency
34
35. Q/A
???
“ Let’s talk about Webpack ”
Aleksandr Tkalenko
DataArt Dnepropetrovsk
2015
35