Downloaded 49 times
More Related Content
![Progressive Web Apps [pt_BR]](https://cdn.slidesharecdn.com/ss_thumbnails/pwa-170306202026-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Production optimization with React and Webpack
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Production optimization with React and Webpack
- 1. Production optimization with Reactand Webpack @k88hudson Firefox Engineering, Mozilla 🏎
- 2.
- 3. Abstracts away theDOM Works on servers, native apps, …Firefox?!? It’s fast* Helpful errors Deterministic component rendering Lifecycle Testable
- 4.
- 6. node_modules file system single bundle forclient-side applications
- 7.
- 8.
- 9. Users have highstandards for performance
- 10. Good optimization isnot just making everything faster, smaller and more fault tolerant…
- 11. …it’s about beingaware of your options and making the right compromises.
- 12.
- 13. Laws of benevolentoptimization
- 14. Laws of benevolentoptimization 1. Don’t optimize prematurely 2. Know your options 3. Instrument your sh*t 4. Set benchmarks that make sense for your actual users
- 15. 1. Don’t optimizeprematurely
- 16. Before you optimize… •Know what you’re building, address the UX/ product risk first • Are your engineers on the same page as your designers/product? Do you share a common goal? • Finish a few rounds of internal testing • Have a good idea of who your users are
- 17. You might beready to optimize if… • You’re about to ship a product to market, particularly on devices or in conditions that are different from your development environment • You’ve already shipped an MVP and are seeing latency/perf/errors bog you down • You’ve already shipped a product and have no idea if it’s performing well but you feel like you should probably figure that out
- 18. 2. Know youroptions
- 19. Where can weoptimize? Development Build time RuntimeAnalysis
- 20.
- 21. Optimizing at buildtime Transform code (for size, compatibility) Manage configuration Remove unused, non-essential code Re-structure files/output
- 22.
- 23.
- 24.
- 25. Compiling ES2015 andJSX <Foo bar /> React.createElement(Foo, { bar: true });
- 26. How big isthe bundle?
- 27.
- 28.
- 29. Webpack’s built-in production optimizationplugins webpack -p
- 30. Webpack’s built-in production optimizationplugins • optimize-minimize (UglifyJS) • optimize-occurrence-order • optimize-dedupe
- 31. With webpack -p main.js172K (-476k)
- 32. Another option— Using theproduction build directly
- 33.
- 34. Use a productionbuild of React process.env.NODE_ENV
- 35. Use a productionbuild of React
- 36.
- 37. Using DefinePlugin fordev-only dependencies my-dev-logger will not be included in the bundle.
- 38. With webpack -p NODE_ENV=production main.js128K (-520k)
- 39. This is stuffyou should definitely be doing.
- 40.
- 41.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. If we renderwith JS…
- 50.
- 51.
- 52.
- 53.
- 54.
- 55. Time to firstReact render
- 56. Time to firstReact render with content
- 57.
- 58. What if we’rehaving rendering issues?
- 59. Reasons this mightbe a problem • You are manipulating or reading the DOM directly • You are handling very large arrays of complex elements • Your business logic contains computationally expensive functions • You are rendering very complex DOM elements (such as SVG visualizations)
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. Use React Perftools require(“react-addons-perf“);
- 67.
- 68. Laws of benevolentoptimization 1. Don’t optimize prematurely 2. Know your options 3. Instrument your sh*t 4. Set benchmarks that make sense for your actual users
- 69. What should youbenchmark? • File size • Time to first load • Time to render
- 70. What is acceptabledepends on who your users are what they’re likely to expect
- 71. The difference between over-engineering and good engineering is making the right compromises
- 72. Thanks! Tweet at me@k88hudson 😎