Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Production optimization with React and Webpack

6,082 views

Published on

Instrument, optimize, and instrument your React + Webpack build with these tips and tricks!

Published in: Technology
  • Dating direct: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39pMlLF ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Production optimization with React and Webpack

  1. 1. Production optimization with
 React and Webpack @k88hudson Firefox Engineering, Mozilla 🏎
  2. 2. Why React?
  3. 3. Abstracts away the DOM Works on servers, native apps, …Firefox?!? It’s fast* Helpful errors Deterministic component rendering Lifecycle Testable
  4. 4. Why Webpack?
  5. 5. node_modules file system single bundle for client-side applications
  6. 6. Why optimization?
  7. 7. ERROR! ERROR!
  8. 8. Users have high standards for performance
  9. 9. Good optimization is not just making everything faster, smaller and more fault tolerant…
  10. 10. …it’s about being aware of your options and making the right compromises.
  11. 11. Everyone has Opinions™
  12. 12. Laws of benevolent optimization
  13. 13. Laws of benevolent optimization 1. Don’t optimize prematurely 2. Know your options 3. Instrument your sh*t 4. Set benchmarks that make sense for your actual users
  14. 14. 1. Don’t optimize prematurely
  15. 15. 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
  16. 16. You might be ready 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
  17. 17. 2. Know your options
  18. 18. Where can we optimize? Development Build time RuntimeAnalysis
  19. 19. Webpack—optimizing at Build time Development
  20. 20. Optimizing at build time Transform code (for size, compatibility) Manage configuration Remove unused, non-essential code Re-structure files/output
  21. 21. main.js main.bundle.js
  22. 22. Typical Webpack set-up
  23. 23. Using custom loaders
  24. 24. Compiling ES2015 and JSX <Foo bar /> React.createElement(Foo, { bar: true });
  25. 25. How big is the bundle?
  26. 26. Without webpack react.js 628K react-dom.js 4.0k
  27. 27. With webpack main.js 648K
  28. 28. Webpack’s built-in production optimization plugins webpack -p
  29. 29. Webpack’s built-in production optimization plugins • optimize-minimize (UglifyJS) • optimize-occurrence-order • optimize-dedupe
  30. 30. With webpack -p main.js 172K (-476k)
  31. 31. Another option— Using the production build directly
  32. 32. With resolve/externals main.js 136K (-512)
  33. 33. Use a production build of React process.env.NODE_ENV
  34. 34. Use a production build of React
  35. 35. How DefinePlugin works
  36. 36. Using DefinePlugin for dev-only dependencies my-dev-logger will not be included in the bundle.
  37. 37. With webpack -p NODE_ENV=production main.js 128K (-520k)
  38. 38. This is stuff you should definitely be doing.
  39. 39. 3. Instrument your sh*t
  40. 40. webpack --json
  41. 41. webpack-bundle-size-analyzer
  42. 42. React—optimizing at Runtime
  43. 43. First-load latency
  44. 44. First-load latency
  45. 45. First-load latency
  46. 46. General optimizations
  47. 47. If we render with JS…
  48. 48. loading…
  49. 49. Server-side rendering with react
  50. 50. Precompile the initial state
  51. 51. Instrumenting performance
  52. 52. Instrumenting performance
  53. 53. Time to first React render
  54. 54. Time to first React render
 with content
  55. 55. Total render time
  56. 56. What if we’re having
 rendering issues?
  57. 57. Reasons this might be 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)
  58. 58. Manipulating/reading the DOM
  59. 59. Using keys correctly
  60. 60. Using keys correctly
  61. 61. Using keys correctly
  62. 62. shouldComponentUpdate
  63. 63. shouldComponentUpdate
  64. 64. Use React Perf tools require(“react-addons-perf“);
  65. 65. Perf.printInclusive Perf.printExclusive Perf.printWasted Perf.printOperations()
  66. 66. Laws of benevolent optimization 1. Don’t optimize prematurely 2. Know your options 3. Instrument your sh*t 4. Set benchmarks that make sense for your actual users
  67. 67. What should you benchmark? • File size • Time to first load • Time to render
  68. 68. What is acceptable depends on who your users are what they’re likely to expect
  69. 69. The difference between 
 over-engineering and good engineering is making the right compromises
  70. 70. Thanks! Tweet at me @k88hudson 😎

×