Users expect websites to be blazing fast, and shaving a couple seconds off your initial page load time can be the difference between a slick or sluggish feeling user experience. Luckily, many bundle optimization tools and techniques such as lazy loading and dynamic imports can also be brought to bear in SPFx solutions.
Analyze package contents
The first step is identifying the opportunities for optimization. Bundle Analyzer allows us to visualize the size of each dependency in a package with an interactive treemap. This helps us understand what exactly is in our package and start to look for opportunities to optimize.
React.memo (not to be confused with the useMemo hook) is a great tool for eliminating needless renders in your React components. This article will explore the problem it’s designed to solve, and when it makes sense to use it.
Note that render in this context does not necessarily equate the HTML DOM being redrawn, but React executing the rendering logic in your component.
Consider this trivial example with two Labels and a button. The first label displays a counter, and the button increments the counter. The second label displays a description.
Being framework agnostic is a big deal, especially in this age of extreme framework fragmentation. Many large organizations have widely distributed apps and engineering teams, using different web frameworks. I’ve been on projects that used Angular, React and Knockout. What if they can all share the same building blocks?
This article will go over Web Components and StencilJS. How do they work, what problems do they solve and when should we use them?
Check out this amazing page with a button that pops up a tooltip on hover. Can you tell which web framework it’s using?
Laurence Do
Coder, builder, imagineer: solution architect at Slalom Consulting
