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.

Refer to…

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.

Photo by Clément Hélardot on Unsplash

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?

Photo by Bonneval Sebastien on Unsplash

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store