CodeFest 2018. Prosper Otemuyiwa (UNICODE LABS, LLC) — Webpack 4: Lighting The Fire

Посмотрите выступление Prosper: https://2018.codefest.ru/lecture/1326/

Elon's Falcon Heavy Rocket had side boosters that launched it powerfully into space and returned back to Earth. Webpack is a build booster that can skyrocket your app's performance if understood and harnessed properly. With Webpack 4, your app will be on a Falcon Heavy rollercoaster. I'll share the state of the union with Webpack 4 and how you can leverage its simplicity and power in your apps!

Level
Beginner, Mid-Level, All Levels.

Transcript

1. WEBPACK 4: THE FIRE PROSPER OTEMUYIWA | CODEFEST RUSSIA 2018 LIGHTING
2. VIBRANIUM OPEN SOURCERER @unicodeveloper
3. GOOGLE DEVELOPER EXPERT @unicodeveloper
4. DEVELOPER ADVOCATE | COMMUNITY BUILDER forLoop Africa Laravel Nigeria Angular Nigeria Webpack Africa
5. webpack 4: LEGATO FIRST MAJOR RELEASE WITH A CODENAME CODENAME
6. “The pain that you’ve been feeling can’t compare to the joy webpack 4 brings, @unicodeveloper is lighting the fire #codefestRussia2018” #TweetQuote
7. FASTER BUILD TIMES BY DEFAULT! Up to 98% faster than previous versions.
8. webpack 3 2405ms webpack 4 1388ms
9. ZERO CONFIG #0CJS BUNDLER! ⚓ ...to enhance the developer experience.
10. #0CJS BUNDLER ⚓ 1. No need to define an entry point. 2. No need to define an output. 3. In fact, no need for a config file. Takes src/index.js file as the default entry point. Emits the bundle to dist/main.js file by default.
11. #0CJS BUNDLER ⚓ Just Webpack away!
12. #0CJS BUNDLER ⚓ Throws an error if ./src directory doesn’t exist.
13. BETTER DEFAULTS MODE OPTIONS PRODUCTION DEVELOPMENT
14. BETTER DEFAULTS MODE OPTION webpack.config.js
15. BETTER DEFAULTS MODE OPTION - SCRIPTS webpack.config.js
16. BETTER DEFAULTS MODE OPTION - DEVELOPMENT - Better runtime error messages - Fast incremental compilation - Better tooling for in-browser debugging
17. BETTER DEFAULTS MODE OPTION - PRODUCTION - Small output size - Fast code at runtime - Easy to use output assets - Omitting development-only code
18. ACCOMMODATING MORE MODULE TYPES .wasm, .mjs, .js, .json
19. “ Webpack 4 - the Airbnb of module types for optimal web performance” - @unicodeveloper
20. MODULE TYPES - WEB ASSEMBLY OUT OF THE BOX - webassembly/experimental - import webassembly modules into your js apps to make it fast!
21. MODULE TYPES - WEB ASSEMBLY MAGIC
22. DLLS IN THE BROWSER? C# & WEBASSEMBLY? NOT POSSIBLE!!!
23. DLLS IN THE BROWSER? C# & WEBASSEMBLY? WITH WEBPACK, IT IS POSSIBLE!!! ✅
24. DLLS IN THE BROWSER? WEBPACK & BLAZOR https://blazor-demo.github.io PLAY WITH THE DEMO
25. MODULE TYPES - JSON TREE SHAKING import { succeed } from ‘./details.json’; REMOVE UNUSED CODE. DEAD CODE ELIMINATION
26. MODULE TYPES - JSON TREE SHAKING import { succeed } from ‘./details.json’;
27. OVERHAULED PLUGIN SYSTEM. FRESH! ❖ Monomorphic Hooks ❖ Lazy Compiling ❖ Easy Upgrade to New API
28. NEW PLUGIN SYSTEM ❖ Must provide a name when adding plugins. ❖ Register hooks by creating a new Hook object as property of the hooks object. ❖ The hooks object houses all hooks as property of the extensible class.
29. FAREWELL CommonsChunkPlugin
30. HELLO SplitChunksPlugin optimization.splitChunks optimization.runtimeChunk OUT OF THE BOX
31. PLUGIN PROFILING Webpack Plugin Profiling on Google Chrome
32. PLUGIN PROFILING IDENTIFY WHAT PLUGINS ARE TAKING UP YOUR CPU TIME
33. PLUGIN PROFILING Thanks to @samccone
34. Upgrade to webpack 4 https://github.com/webpack/webpack.js. org/issues/1706 https://medium.com/webpack
35. Upgrade to webpack 4 The React Team is close to major upgrade.
36. ROAD TO webpack 5
37. CSS, HTML, FILE as module types CSS Code Splitting Multicore/ Multithreaded Builds WEBPACK 5? ⛷
38. WASM support to become stable Module disk cache between build processes CSS as a first class citizen WEBPACK 5? ⛷
39. THANKS, ANY QUESTIONS? I’M EVERYWHERE GITHUB MEDIUM TWITTER @unicodeveloper CODEPEN