A tale of two front-end development environments: or how bend npm3 to your will
summary
Uses webpack and the webpack bundle size analyzer to pin down duplicate React installs, finds React 15.3 at top level and React 14.8 nested, and shows npm ls and npm dedupe behavior under npm3 flat installs. Starts with an 800k bundle for a Bike Lane Go example and cuts it to 136k with resolve aliases, webpack.optimize.DedupePlugin and switching to production React builds. Demonstrates a vendor bundle approach for Firefox Activity Stream using libraryTarget (var and commonjs) to integrate npm dependencies into a legacy loader and it works.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 0:14Back in time
- 2:44About me
- 4:22Dependency management
- 5:35A more productive approach
- 6:22Using any module loader
- 6:40Making a directory
- 7:52Module loading
- 8:27User experience
- 12:34Bundle detective
- 15:34Why do duplicates happen
- 18:45Webpack hacks
- 20:46Legacy systems
- 22:37Proxy
- 24:51Conclusion
related talks
30mWebpack – The React Parts
19mMaking front end modules actually work
40mThe state of frontend frameworks in 2023
45mDark Art of Webpack Bundle Tuning
28mWebpack for a better development workflow
23mStreamline your code with webpack
24mMaking small modules actually work with webpack and npm
18mFront End Dependency Management