Performance Patterns

Performance patterns can be used to achieve a better user and developer experience.

Any client-side JavaScript in our application has to be shipped to the client in one way or another. Before this can happen, we have to make sure that:

1. The JavaScript is executable in a browser environment
2. The file that the browser has to download and fetch only contains relevant code, to ensure the browser can quickly fetch this bundle without using too much bandwidth

---

Tools

When working with Bundlers, for example Webpack, we have to configure Webpack to include a JavaScript Compilers like Babel, and add optimizations like the Terser Minifiers.

There are also tools out there that combine all these steps, such as:

• SWC - a Rust-based compiler, bundler, and minifier
• ESBuild - a Go-based compiler, bundler, and minifier.

---

References

• https://javascriptpatterns.vercel.app/patterns/design-patterns/observer-pattern

---

Children

1. Browser Hints
2. Bundle Splitting
3. Dynamic Import
4. Import on Visibility
5. Route Based Splitting
6. Static Import
7. Tree Shaking