Frontend performance pattern

Tại sao nên đọc bài này?

• Các pattern thường được sử dụng ở frontend để tối ưu performance

• Ứng dụng vào việc optimize perform cho website của bạn

• Thuyết phục sếp và đồng nghiệp

Khi nào thì nên quan tâm tới performance?

• Centralize vs Decentralize

• Monolithic vs Microservice

• SSR vs CSR

• OOP vs FP

• SQL vs No-SQL

• Language X vs Language Y

• API vs GraphQL

• Stream vs Batch

• Functional - App của bạn chạy có đúng logic không

• Maintainable/Readable - Chạy đúng rồi thì thằng khác lao vào sửa, thêm feature mới có dễ không

• Performance - Code ổn rồi thì nó có nhanh không, hay là chậm rì

Mình đã từng rất ám ảnh về performance, và cũng từng gặp rất nhiều bạn trẻ có ảm ảnh giống mình. Có lần mình tốn gần ngày để parallel được một flow verify CSV trong khi kết quả làm xong là mình tiết kiệm được từ 15 phút run time thành 5 phút (tùy vào số core của máy). Tiếc cái là script trên chỉ chạy 1 tuần 1 lần. Nghĩa là mình bỏ ra 2 ngày, chỉ để tiết kiệm 40p một tháng cho một con server ngôi chơi hết quãng thời gian còn lại.

Cũng có lần mình phải sửa lại một flow logic react mà có form khoảng gần 20 fields, và bạn dev dùng useMemo cho tất cả các state đó, dẫn tới bug logic khi chạy mà đến bạn đó cũng không biết sửa làm sao mà phải nhờ đến free lancer để debug giúp. Sui rủi sao mình là thằng free lancer đó!

Performance pattern

Split code/Lazyload

Code-Splitting - React

Most React apps will have their files "bundled" using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file: a "bundle". This bundle can then be included on a webpage to load an entire app at once.

https://reactjs.org/docs/code-splitting.html

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Coi xem mình có cài thêm lib nào tương tự lib có sẵn không?

• Bạn dùng lib có sẵn, cầu mong nó fit với những thứ mình sắp làm

• Bạn dùng lib do bạn chọn, sửa lại code cũ, cầu mong nó fit với problem cũ, không có regression bug

• Bạn dùng cả 2 lib ⇒ Chỉ dùng khi đây là option cuối cùng của vũ trụ gửi tới cho bạn... Kiểu như PM kề dao vào cổ bảo “mai làm xong feature nhé em”

You might not need date-fns

Hola! Lazy dev here and today we are going to discuss date-fns. People often choose date libraries before they really need it. "How we will format the date?", "Are there any alternatives?" But really, are there? Sorry, this question was required. No, I'm not. Moreover, I was a super-active user and evangelist of date-fns.

https://dev.to/dmtrkovalenko/you-might-not-need-date-fns-23f7

Chọn các thư viện ES6, support tree shaking

Minimizing bundle size - MUI

Learn more about the tools you can leverage to reduce the bundle size. The bundle size of MUI is taken very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages ( view the latest snapshot). Combined with dangerJS we can inspect detailed bundle size changes on every Pull Request.

https://mui.com/guides/minimizing-bundle-size/

Debounce user input

Debounce Your Input Handlers | Web Fundamentals | Google Developers

Input handlers are a potential cause of performance problems in your apps, as they can block frames from completing, and can cause additional and unnecessary layout work. Avoid long-running input handlers; they can block scrolling. Do not make style changes in input handlers.

https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

Thêm tag loading=lazy cho tag img, iframe

Memorized function

How to use Memoize to cache JavaScript function results and speed up your code

Functions are an integral part of programming. They help add modularity and reusability to our code. It's quite common to divide our program into chunks using functions which we can call later to perform some useful action. Sometimes, a function can become expensive to call multiple times (say, a

https://www.freecodecamp.org/news/understanding-memoize-in-javascript-51d07d19430e/

Cache frontend assets dùng Service Worker

React PWA with Workbox

Making a Progressive Web App using React is easy!* *unless you actually want it to do anything. My goal with this article is to get you going making a PWA with React and Workbox that has all the features of a real progressive web app including installability, prechaching, background-sync, and push notifications.

https://dev.to/noconsulate/react-pwa-with-workbox-6dl

Virtual list

React Virtual

React Virtual is designed to get out of your way. Inversion of control is our name, and control is your game. If you want to customize something, we'll give you a way to do it. Just be careful what you wish for!

https://react-virtual.tanstack.com/

Tách một long run function thành nhiều short run function

Optimistic update

Cheat Code for a Lightning Fast Front End: Building an Optimistic UI

How we can leverage the optimistic UI pattern for maximum performance in our app In the never ending pursuit of building faster and faster web apps, there are no options off limits. We split our databases to optimize for reading and writing, make our services scale up and down with demand and have complex caching strategies on top of all of it.

https://derekndavis.com/posts/lightning-fast-front-end-build-optimistic-ui

Lazy polyfill/Dynamic polyfill

Polyfill.io

Polyfill.io

https://polyfill.io/v3/