Geekly articles weekly

Bereaksi Pemecahan Kode pada 2019

Ini tahun 2019! Semua orang berpikir mereka tahu pemecahan kode. Jadi - mari kita periksa!



Apa artinya pemisahan kode?


Singkatnya pemecahan kode hanya tentang tidak memuat semuanya. Maka Anda membaca halaman ini Anda tidak perlu memuat seluruh situs. Saat Anda memilih satu baris dari basis data - Anda tidak harus mengambil semuanya.
Jelas? Pemecahan kode juga cukup jelas, tidak hanya tentang data Anda, tetapi kode Anda.


Siapa (Apa?) Apakah membuat pemisahan kode?


React.lazy ? Tidak - hanya menggunakannya. Pemecahan kode sedang dilakukan pada tingkat bundler - paket web, paket, atau hanya sistem file Anda jika ada modul ESM "asli". Pemecahan kode hanyalah file, file yang dapat Anda muat di suatu tempat "nanti". Jadi - untuk pertanyaan " Apa yang memecah kode powering? " - jawabannya adalah - "bundler".


Siapa (Apa) yang menggunakan pemisahan kode?


React.lazy sedang menggunakan. Hanya menggunakan pemecahan kode bundler Anda. Hanya menelepon impor saat diberikan. Dan itu saja.


Bagaimana dengan React-loadable?


React.lazy menggantikannya. Dan menyediakan lebih banyak fitur, seperti Suspense untuk mengontrol status pemuatan. Jadi - gunakan React.Lazy sebagai gantinya.


Yap, itu saja. Terima kasih sudah membaca dan semoga harimu menyenangkan.

Mengapa artikel belum selesai?


Baik. Ada beberapa zona abu-abu tentang React.lazy dan pemecahan kode yang saya lupa sebutkan.


Gray Zone 1 - pengujian


Tidak mudah untuk menguji React.lazy karena asinkroninya . Itu hanya akan "kosong", asalkan itu belum dimuat (bahkan jika itu) - Promises dan import kembali, dan malas menerima, janji , yang selalu dieksekusi di centang berikutnya .


Solusi yang diajukan? Anda tidak akan percaya, tetapi solusi yang diusulkan adalah menggunakan kabel sinkron - Lihat permintaan tarik . Jadi - mari kita buat imports kami SYNCHRONOUS !!! (untuk memperbaiki masalah malas untuk tes, atau kasus sisi server lain)


 const LazyText = lazy(() => ({ then(cb) { cb({default: Text}); // this is "sync" thenable }, })); const root = ReactTestRenderer.create( <Suspense fallback={<Text text="Loading..." />}> <LazyText text="Hi" /> // this lazy is not very lazy </Suspense>, );

Tidak sulit untuk mengonversi fungsi impor ke memo yang sinkron.


 const syncImport = (importFn) => { let preloaded = undefined; const promise = importFn().then(module => preloaded = module); // ^ "auto" import and "cache" promise return () => preloaded ? { then: () => preloaded } : promise; // ^ return sync thenable then possible } const lazyImport = isNode ? syncImport : a => a; // ^ sync for node, async for browser const LazyComponent = React.lazy(lazyImport(() => import('./file'));

Zona abu-abu 2 - SSR


Jika Anda TIDAK membutuhkan SSR - silakan lanjutkan membaca artikel!

React.lazy ramah terhadap SSR. Tetapi membutuhkan Suspense untuk bekerja, dan Suspense BUKAN ramah sisi server .


Ada 2 solusi:


  • Ganti Suspense dengan Fragment, misalnya dengan mengejek. Kemudian, gunakan versi import diubah dengan sinkron then untuk membuat malas juga berperilaku sinkron.
     import React from 'react'; const realLazy = React.lazy; React.lazy = importer => realLazy(syncImport(importer)); React.Suspense = React.Fragment; // :P // ^ React SSR just got fixed :D

Ini adalah pilihan yang baik, tetapi tidak akan cukup ramah dari sisi klien. Mengapa Mari kita tentukan solusi ke-2 yang mungkin:


  • Gunakan perpustakaan khusus untuk melacak skrip, potongan dan gaya yang digunakan, dan memuatnya di sisi klien (terutama gaya!) Sebelum Bereaksi hidrasi. Atau yang lain - Anda akan membuat lubang kosong alih-alih komponen yang Anda pisahkan dengan kode. Sekali lagi - Anda tidak memuat kode yang baru saja Anda pisahkan, sehingga Anda tidak dapat membuat apa pun yang Anda inginkan.

Lihatlah perpustakaan yang memecah kode


  • Universal-component - perpustakaan tertua, dan masih dapat dikelola. Ini "menemukan" pemecahan kode dalam hal Webpack yang diajarkan untuk pemecahan kode.
  • React-loadable - sangat populer, tetapi perpustakaan yang tidak dirawat. Membuat kode meludah hal yang populer. Masalah ditutup, jadi tidak ada komunitas di sekitarnya.
  • Loadable-components - perpustakaan lengkap fitur, senang digunakan, dengan komunitas paling aktif di sekitarnya.
  • Komponen yang diimpor - pustaka tunggal, tidak terikat ke Webpack, mis. Mampu menangani paket atau ESM.
  • React-async-component - sudah mati perpustakaan (belum populer), yang membuat dampak signifikan pada segala sesuatu di sekitar pemecahan kode, kustom React tree traversal dan SSR.
  • Perpustakaan lain - ada banyak perpustakaan, banyak yang tidak selamat dari evolusi Webpack atau Bereaksi 16 - Saya belum mendaftar di sini, tetapi jika Anda tahu kandidat yang baik - hanya DM saya.

Perpustakaan mana yang akan dipilih?


Mudah - tidak dapat di-load-re - berat dan tidak terpelihara, bahkan jika itu masih sangat populer. (dan terima kasih telah mempopulerkan pemecahan kode, lagi)


Loadable-components - mungkin merupakan pilihan yang sangat baik. Itu ditulis dengan sangat baik, dipelihara secara aktif dan mendukung semuanya di luar kotak. Mendukung "impor dinamis penuh", memungkinkan Anda untuk mengimpor file tergantung pada alat peraga yang diberikan, tetapi dengan demikian tidak dapat diketik. Mendukung Suspense, jadi bisa menggantikan React.lazy.


Komponen universal - sebenarnya "penemu" impor dinamis penuh - mereka menerapkannya di Webpack. Dan banyak hal lain di level rendah - mereka melakukannya. Saya akan mengatakan - perpustakaan ini agak hardcore, dan sedikit kurang ramah pengguna. Dokumentasi komponen yang dapat dimuat tidak terkalahkan. Layak jika tidak menggunakan perpustakaan ini, kemudian membaca dokumentasi - ada begitu banyak detail yang harus Anda ketahui ...


Bereaksi-impor-komponen - agak aneh. Ini bundler independen, jadi tidak akan pernah putus (tidak ada yang bisa dipatahkan), akan bekerja dengan Webpack 5 dan 55, tetapi itu harus dibayar. Sementara pustaka sebelumnya selama SSR akan menambahkan semua skrip yang digunakan ke badan laman, dan Anda akan dapat memuat semua skrip secara paralel - yang diimpor tidak tahu nama file, dan akan memanggil yang asli "impor" (itu sebabnya bundel independen) untuk memuat potongan yang digunakan, tetapi hanya dapat melakukan panggilan dari dalam bundel utama - sehingga semua skrip tambahan akan dimuat hanya setelah yang utama diunduh dan dieksekusi. Tidak mendukung impor dinamis penuh, seperti React.lazy, dan, sebagai hasilnya, dapat diketik. Juga mendukung Suspense. Menggunakan kabel sinkron pada SSR. Ini juga memiliki pendekatan yang sangat berbeda untuk CSS, dan dukungan aliran rendering sempurna.


Tidak ada perbedaan dalam kualitas atau popularitas antara perpustakaan yang terdaftar, dan kami semua adalah teman baik - jadi pilihlah sepenuh hati.


Gray zone 3 - render hybrid


SSR adalah hal yang baik, tetapi, Anda tahu, sulit. Proyek kecil mungkin ingin memiliki SSR - ada banyak alasan untuk memilikinya - tetapi mereka mungkin tidak ingin mengatur dan mempertahankannya.


SSR bisa benar-benar, SANGAT sulit. Coba razzle atau lanjutkan dengan Next.js jika Anda ingin kemenangan cepat.

Jadi solusi termudah saya untuk SSR, terutama untuk SPA sederhana akan prerendering. Seperti membuka SPA Anda di browser dan menekan tombol "Simpan". Seperti:


  • Bereaksi-jepret - menggunakan dalang (alias Chrome tanpa kepala) untuk merender halaman Anda di "browser" dan menyimpan hasilnya sebagai halaman HTML statis.
  • Rendertron - yang melakukan hal yang sama, tetapi dengan cara ( cloud ) yang berbeda.

Prerender adalah "SSR" tanpa "Server". SSR menggunakan Klien. Ajaib! Dan bekerja di luar kotak ... ... ... tetapi tidak untuk meludah kode.
Jadi - Anda baru saja merender halaman Anda di browser, menyimpan HTML, dan meminta memuat hal yang sama. Tetapi Kode Spesifik Sisi Server (untuk mengumpulkan semua potongan yang digunakan) tidak digunakan, karena TIDAK ADA SERVER !



Pada bagian sebelumnya, saya telah menunjuk ke perpustakaan yang terikat ke webpack dalam hal mengumpulkan informasi tentang bongkahan bekas - mereka tidak bisa menangani render hybrid sama sekali.


Komponen yang dapat dimuat versi 2 (tidak kompatibel dengan versi saat ini 5), sebagian didukung oleh reaksi-jepret. Dukungan telah hilang.

Komponen react-diimpor dapat menangani kasus ini, selama tidak terikat pada bundler / sisi, sehingga tidak ada perbedaan untuk SSR atau Hybrid, tetapi hanya untuk snap reaksi, asalkan mendukung "keadaan hidrasi", sedangkan rendertron tidak.


Kemampuan komponen reaksi-impor ini ditemukan saat menulis artikel ini, tidak diketahui sebelumnya - lihat contoh . Cukup mudah.

Dan di sini Anda harus menggunakan solusi lain, yang hanya tegak lurus dengan semua perpustakaan lain.


Komponen reaksi-pra-ditangguhkan


Perpustakaan ini dibuat untuk sebagian hidrasi, dan sebagian bisa merehidrasi aplikasi Anda, menjaga sisanya tetap terhidrasi. Dan itu berfungsi untuk perender SSR dan Hybrid tanpa perbedaan apa pun.
Idenya sederhana:


  • selama SSR - render komponen, dibungkus dengan <div />
  • pada klien - temukan div itu, dan gunakan innerHTML hingga Component siap untuk mengganti HTML yang mati.
  • Anda tidak perlu memuat, dan menunggu bongkahan dengan komponen yang terpecah sebelum hydrate untuk TIDAK membuat lubang putih sebagai gantinya - cukup gunakan HTML yang telah dirender sebelumnya, yang benar-benar sama dengan komponen yang akan dihasilkan oleh komponen nyata , dan yang sudah ada - ia datang dengan respons server (atau hidrida).

Itu sebabnya kita harus menunggu semua bongkar untuk memuat sebelum hidrasi - untuk mencocokkan HTML yang diberikan server. Itu sebabnya kami bisa menggunakan potongan-potongan HTML yang diberikan server sampai klien tidak siap - sama dengan yang hanya akan kami hasilkan.

 import {PrerenderedComponent} from 'react-prerendered-component'; const importer = memoizeOne(() => import('./Component')); // ^ it's very important to keep the "one" promise const Component = React.lazy(importer); // or use any other library with ".prefetch" support // all libraries has it (more or less) const App = () => ( <PrerenderedComponent live={importer()}> {/* ^ shall return the same promise */ } <Component /> {/* ^ would be rendered when a component goes "live" */ } </PrerenderedComponent> );

Ada artikel lain tentang teknologi ini , Anda mungkin membaca. Tapi yang utama di sini - ia memecahkan "Flash Of Unloaded Content" di tempat lain, bukan cara yang umum untuk pemecah kode perpustakaan . Terbuka untuk solusi baru.


TLDR?


  • jangan gunakan react-loadable, itu tidak akan menambah nilai berharga
  • React.lazy baik, tapi masih terlalu sederhana.
  • SSR adalah hal yang sulit, dan Anda harus mengetahuinya
  • Render yang digerakkan oleh dalang hybrid adalah suatu hal. Kadang hal yang lebih sulit.

Source: https://habr.com/ru/post/id444402/

More articles:


All Articles