This document discusses optimizing React and Webpack applications for production. It recommends: 1. Not optimizing prematurely and ensuring engineering and product goals are aligned before optimizing. 2. Understanding available optimization options at build time like minification, code splitting, and using production builds of dependencies, and at runtime like server-side rendering and component lifecycle methods. 3. Instrumenting the application to measure performance metrics like bundle size, load time, and render time to identify optimization opportunities. 4. Setting meaningful benchmarks based on the actual user experience expected, rather than arbitrary metrics, to determine what constitutes acceptable performance.

1. Production optimization with
React and Webpack
@k88hudson
Firefox Engineering, Mozilla
🏎

2. Why React?

3. Abstracts away the DOM
Works on servers,
native apps, …Firefox?!?
It’s fast*
Helpful errors
Deterministic
component
rendering
Lifecycle
Testable

4. Why Webpack?

6. node_modules
file system
single bundle
for client-side
applications

7. Why optimization?

8. ERROR!
ERROR!

9. Users have high standards for
performance

10. Good optimization is not just making
everything faster, smaller and more
fault tolerant…

11. …it’s about being aware of your
options and making the right
compromises.

12. Everyone has Opinions™

13. Laws of benevolent optimization

14. 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

15. 1. Don’t optimize prematurely

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 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

18. 2. Know your options

19. Where can we optimize?
Development Build time
RuntimeAnalysis

20. Webpack—optimizing at
Build time
Development

21. Optimizing at build time
Transform code (for size, compatibility)
Manage configuration
Remove unused, non-essential code
Re-structure files/output

22. main.js
main.bundle.js

23. Typical Webpack set-up

24. Using custom loaders

25. Compiling ES2015 and JSX
<Foo bar />
React.createElement(Foo, { bar: true });

26. How big is the bundle?

27. Without webpack
react.js 628K
react-dom.js 4.0k

28. With webpack
main.js 648K

29. Webpack’s built-in production
optimization plugins
webpack -p

30. Webpack’s built-in production
optimization plugins
• optimize-minimize (UglifyJS)
• optimize-occurrence-order
• optimize-dedupe

31. With webpack -p
main.js 172K (-476k)

32. Another option—
Using the production build directly

33. With resolve/externals
main.js 136K (-512)

34. Use a production build of React
process.env.NODE_ENV

35. Use a production build of React

36. How DefinePlugin works

37. Using DefinePlugin for dev-only
dependencies
my-dev-logger will not be included in the bundle.

38. With webpack -p
NODE_ENV=production
main.js 128K (-520k)

39. This is stuff you should definitely be doing.

40. 3. Instrument your sh*t

41. webpack --json

43. webpack-bundle-size-analyzer

44. React—optimizing at Runtime

45. First-load latency

46. First-load latency

47. First-load latency

48. General optimizations

49. If we render with JS…

50. loading…

51. Server-side rendering with react

52. Precompile the initial state

53. Instrumenting performance

54. Instrumenting performance

55. Time to first React render

56. Time to first React render
with content

57. Total render time

58. What if we’re having
rendering issues?

59. 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)

60. Manipulating/reading the DOM

61. Using keys correctly

62. Using keys correctly

63. Using keys correctly

64. shouldComponentUpdate

65. shouldComponentUpdate

66. Use React Perf tools
require(“react-addons-perf“);

67. Perf.printInclusive
Perf.printExclusive
Perf.printWasted
Perf.printOperations()

68. 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

69. What should you benchmark?
• File size
• Time to first load
• Time to render

70. What is acceptable depends 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
😎