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

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

Trong sự nghiệp lập trình còn nhiều gian truân, mình 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 mình 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ì mình hy vọng CSS và JS của mình sẽ được dịch để hỗ trợ nhiều loại trình duyệt khác nhau. Vì mình 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à mình 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 mình.

Tất nhiên là mình 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 mình 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 mình 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 mình 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 😍.

Mình 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 mình 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 mình 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 các 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 mình thì autoprefixer và babel sẽ luôn hỗ trợ chúng. Với mình 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 mình.

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

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

Mình 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ì mình 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ì mình 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ì mình 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 mình đã 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ù mình không thấy autoprefixer được cài) nên mình 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.

#frontend #babel #autoprefixer #browserslist #canIUse #settings #harmful

Tôi xin lỗi nếu bài viết có bất kỳ typo nào. Nếu bạn nhận thấy điều gì bất thường, xin hãy cho tôi biết.

Nếu có bất điều gì muốn nói, bạn có thể liên hệ với tôi qua các mạng xã hội, tạo discussion hoặc report issue trên Github.

Welcome




manhhomienbienthuy

Xin chào. Tôi là manhhomienbienthuy, nickname khác là naa. Đây là thế giới của tôi, chào mừng đến với thế giới của tôi…

Bài viết mới




Chuyên mục




Lưu trữ theo năm




Câu nói yêu thích




There's a big difference between knowing the name of something and knowing something.

– Richard P. Feynman –

Thông tin liên hệ




Cảm ơn bạn đã quan tâm blog của tôi. Nếu có bất điều gì muốn nói, bạn có thể liên hệ với tôi qua các mạng xã hội, tạo discussion hoặc report issue trên Github.