Đừng dùng last n versions với browserslist

Trong sự nghiệp lập trình còn nhiều gian truân, tôi vừa nhận ra, một sự bất cẩn nhẹ đã gây một vài vấn đề 😟. Tuy không có hậu quả gì quá nghiêm trọng, nhưng cũng là cơ hội để tự xem lại cách làm việc của bản thân ✅.

Số là blog này của tôi sử dụng autoprefixer và @babel/preset-env với setting như sau:

"browserslist": [
    "last 2 versions",
    "> 1%"
]

Với setting như vậy, thì tôi hy vọng CSS và JS của tôi sẽ được dịch để hỗ trợ nhiều loại trình duyệt khác nhau. Vì tôi cũng dùng nhiều cách lập trình mới (ví dụ arrow function) còn css thì dùng thư viện ngoài và tôi không mong muốn nó sẽ gặp lỗi trên máy của người khác khi vào đọc blog của tôi.

Tất nhiên là tôi không có nhu cầu hỗ trợ những trình duyệt quá cũ. Hơn nữa, theo suy nghĩ của tôi thì những người vào đọc blog này (ví dụ như bạn 🤟) thường là developer nên việc cập nhật trình duyệt không có gì phải nghĩ. Thế nhưng tôi cứ để setting như thế để bao phủ một lượng lớn trình duyệt tương đối phổ biến.

Thỉnh thoảng tôi vẫn update các công cụ và dịch lại các file tĩnh, dù mã nguồn của chúng chẳng có gì thay đổi. Giờ đây, với sự trợ giúp của GitHub Actions thì những việc này hoàn toàn được tự động hóa 😍.

Tôi cho rằng, dần dần càng file này sẽ càng ngày càng nhẹ hơn 😃. Thế nhưng thật bất ngờ là sau nhiều năm, kết quả dịch ra vẫn không có gì thay đổi 😴. Arrow function vẫn cứ được dịch về dạng cũ, trong khi tôi tin chắc là chẳng còn trình duyệt nào không chạy được nữa. Lúc này tôi mới xem lại setting và nhận ra sự vi diệu của last 2 versions.

Lấy ví dụ một trình duyệt nổi tiếng là Internet Explorer, thì hiện tại nó đã không còn phiên bản nào mới nữa (phiên bản cuối cùng là IE 11 sắp chính thức bị ngừng hỗ trợ vào tháng 6/2022) và đã được thay thế bởi Edge. Và do sẽ không có phiên bản Internet Explorer nào mới hơn nữa, last 2 versions sẽ bao gồm IE 10 và IE 11 vĩnh viễn (hoặc đến khi nào không ai nhớ đến nó nữa 😇).

Đó là chưa kể trên thế giới tồn tại rất nhiều trình duyệt từ có tiếng đến chẳng có ai dùng, và last 2 versions sẽ luôn luôn cho chúng vào danh sách. Một số trình duyệt ít người biết và cũng ít người dùng có thể kể đến (xem toàn danh sách trình duyệt đầy đủ ở đây) là:

• Baidu (0%
• Blackberry (0%)
• IE Mobile (0.035%)

Dù chỉ có một lượng người dùng rất ít, nhưng với setting của tôi thì autoprefixer và babel sẽ luôn hỗ trợ chúng. Với tôi thì việc hỗ trợ những trình duyệt này chẳng mang lại giá trị gì, ngoại trừ làm nặng thêm các file JS, CSS của tôi.

Và sau một hồi tìm hiểu, suy nghĩ kỹ càng thì sau đây là setting mới của tôi:

"browserslist": [
    "> 1%",
    "not dead",
    "not op_mini all"
]

Tôi tin rằng, sử dụng tỉ lệ người sử dụng là một lựa chọn tốt. Nếu một trình duyệt không còn được yêu thích nữa, thì tôi cũng không cần hỗ trợ nó nữa. Những dữ liệu này sẽ được update rất thường xuyên.

Nếu bạn cũng đang sử dụng last n versions thì tôi nghĩ bạn cũng nên thay đổi setting này ngay bây giờ. Nó sẽ mang lại giá trị rất lớn là các file JS, CSS sẽ nhẹ đi đáng kể 💯.

Update:

Sau khi thay đổi setting thì tôi nhận ra babel không còn cần thiết nữa nên đã bỏ công cụ này đi. Code JavaScript của tôi đã chạy trên mọi trình duyệt trong setting và không cần transpile về phiên bản cũ hơn nữa.

Tailwind CSS đã có sẵn postcss và có thể tự thêm prefix (dù tôi không thấy autoprefixer được cài) nên tôi chuyển sang dùng trực tiếp, bỏ luôn postcss và các plugin. Kết quả dịch ra nặng hơn mấy chục byte so với trước, nhưng các công cụ cần thiết nhẹ đi nhiều.