Perpustakaan styled-components memasuki mod penyelenggaraan pada Mac 2023, meninggalkan beribu-ribu aplikasi produksi dalam kedudukan yang mencabar. Walaupun penyelenggara asal menyebut isu keserasian dengan React Server Components dan kebimbangan prestasi, banyak pasukan mendapati mereka tidak dapat bermigrasi dengan pantas daripada pelaksanaan styled-components sedia ada mereka. Sebuah fork baharu yang berfokuskan prestasi telah muncul, mendakwa dapat memberikan rendering 40% lebih pantas sementara pasukan merancang strategi migrasi mereka.
Peningkatan Prestasi
- 40% lebih pantas dalam rendering berbanding styled-components asal
- Animasi lebih pantas dan peralihan yang lebih stabil
- Menyelesaikan isu keserasian React 19 streaming SSR
 |
|---|
| Artikel ini membincangkan isu prestasi dengan styled-components dan meneroka strategi migrasi yang berpotensi untuk pembangun |
Komuniti Mempersoalkan Pendekatan CSS-in-JS
Pengumuman ini telah mencetuskan semula perdebatan mengenai nilai asas penyelesaian CSS-in-JS . Ramai pembangun menyatakan keraguan tentang keseluruhan pendekatan ini, dengan sesetengah menyebutnya sebagai salah satu idea frontend terburuk dalam dekad yang lalu. Perbincangan komuniti mendedahkan keutamaan yang semakin meningkat untuk penyelesaian CSS tradisional seperti CSS Modules dan konvensyen penamaan BEM , yang menyediakan faedah skop tanpa kos prestasi masa jalan.
CSS-in-JS mungkin merupakan idea terburuk yang muncul daripada 10 tahun terakhir frontend.
Beberapa pembangun menunjukkan bahawa isu prestasi boleh diramalkan dari awal, mempersoalkan mengapa suntikan CSS masa jalan pernah dianggap boleh diterima apabila pengekstrakan statik sentiasa lebih pantas.
Penyelesaian Alternatif Mendapat Tarikan
Komuniti sedang giat membincangkan laluan migrasi, dengan vanilla-extract muncul sebagai alternatif popular. Alat ini menyediakan sintaks dan konsep yang serupa dengan styled-components tetapi mengkompil segala-galanya pada masa binaan, menghapuskan overhed masa jalan sepenuhnya. Tidak seperti styled-components , vanilla-extract berfungsi merentas rangka kerja yang berbeza dan menghasilkan fail CSS standard dengan keselamatan jenis untuk token reka bentuk.
Pembangun lain kembali kepada penyelesaian yang lebih mudah seperti CSS Modules digabungkan dengan ciri CSS moden termasuk lapisan dan sifat tersuai. Pendekatan ini menawarkan faedah skop komponen yang pada asalnya mendorong penggunaan CSS-in-JS tanpa penalti prestasi.
Alternatif Migrasi Popular
- vanilla-extract: CSS-in-TypeScript tanpa runtime dengan kompilasi masa binaan
- CSS Modules: CSS berskop dengan pendekatan stylesheet tradisional
- BEM + CSS Layers: CSS global dengan konvensyen penamaan dan ciri CSS moden
- Tailwind CSS: Rangka kerja CSS berasaskan utiliti
Pendirian Pasukan React Mempengaruhi Hala Tuju
Cadangan rasmi pasukan React untuk menggunakan fail CSS statik untuk gaya dan gaya sebaris hanya untuk nilai dinamik telah mempengaruhi perbincangan komuniti dengan ketara. Panduan ini mewakili peralihan yang jelas daripada suntikan CSS masa jalan, mengesahkan kebimbangan tentang prestasi yang dipegang oleh sesetengah pembangun sejak perpustakaan CSS-in-JS mula mendapat populariti.
Fork prestasi ini berfungsi sebagai jambatan sementara untuk pasukan dengan pangkalan kod yang besar yang tidak dapat segera menulis semula sistem penggayaan mereka. Walaupun ia memberikan peningkatan prestasi segera, penyelenggara menekankan bahawa ini secara eksplisit merupakan penyelesaian jangka pendek yang direka untuk membeli masa untuk migrasi yang betul dan bukannya komitmen penyelenggaraan jangka panjang.
Perbualan yang lebih luas mencerminkan ekosistem frontend yang semakin matang di mana eksperimen awal dengan CSS-in-JS memberi laluan kepada pendekatan yang lebih sedar prestasi yang mengimbangi pengalaman pembangun dengan kecekapan masa jalan.
Rujukan: Cut styled-components into pieces: This is our last resort