Mengapa ukuran file React begitu besar mengingat API-nya yang kecil?

88

Ini angkanya

  • min + gzip 26k
  • gzip 90k
  • asli 450 + k

Dan React tidak memiliki banyak fitur dalam dokumentasinya. Mengapa begitu besar?

Saya merasa ini adalah penerapan DOM ringan. Tapi saya ingin memastikan.

reactjs 
— Eldar Djafarov
sumber
4
Sudahkah Anda melihat sumbernya, untuk melihat apa fungsinya? Tip bermanfaat, jangan lihat versi minified.
— Tuan Lister
6
Saya memutuskan untuk bertanya sebelum menyelami kode. Meskipun karena saya berencana untuk menggunakan react, saya akan tetap menyelam di sana;)
— Eldar Djafarov
2
26k tidak terlalu besar sama sekali ..
— BT
Orang bilang bereaksi tidak besar. Ya, reactjs sendiri sangat kecil (6.41KB untuk versi 16.1.1) tetapi ingat bahwa React membutuhkan ReactDOM untuk bekerja dan ReactDOM memiliki ukuran 92.4KB
— Dinh Tran

Jawaban:

187

React cukup berhasil! Bagian terbesar yang tidak terlihat dari React mungkin adalah sistem event - React tidak hanya mengimplementasikan event dispatching dan bubble-nya sendiri, tapi juga menormalkan event umum di seluruh browser sehingga Anda tidak perlu terlalu khawatir tentang itu. Misalnya, SelectEventPlugin adalah "plugin" peristiwa bawaan yang menyediakan onSelectperistiwa yang berperilaku sama di semua browser.

The DOM maya pelaksanaan tidak mengambil jumlah yang layak kode juga; banyak upaya dihabiskan untuk pengoptimalan kinerja, itulah sebabnya versi yang tidak diperkecil menyertakan ReactPerf , yang merupakan alat untuk mengukur kinerja rendering. Dalam memperbarui DOM, React juga melakukan beberapa hal mudah untuk Anda seperti mempertahankan pemilihan input apa pun dan menjaga posisi scroll saat ini tetap sama.

React juga memiliki beberapa trik lain. Salah satu yang paling keren adalah ia sepenuhnya mendukung rendering komponen ke string HTML bahkan jika Anda tidak memiliki lingkungan browser, sehingga Anda dapat menurunkan halaman yang berfungsi bahkan sebelum JS dimuat.

Apa yang Anda bandingkan dengan React? react-15.0.2.min.jsadalah 43k (gzipped), tetapi jQuery adalah 33k sementara ember-2.6.0.prod.jsitu 363k (also gzipped). Jelas kerangka kerja ini tidak melakukan hal yang persis sama tetapi mereka memiliki banyak tumpang tindih, jadi menurut saya perbandingannya masuk akal.

Jika Anda khawatir tentang ukuran unduhan, saya tidak akan terlalu khawatir tentang kontribusi kode JS untuk itu. Berikut adalah iklan yang saya lihat di sisi kanan halaman Stack Overflow saya sekarang:

Ukuran downloadnya adalah 95k - Saya tidak akan berpikir dua kali untuk memasukkan gambar seperti itu ke dalam halaman karena (meskipun saya khawatir tentang performa) biasanya ada begitu banyak hal terkait performa yang harus diperbaiki yang lebih menguntungkan.

Singkatnya, menurut saya React tidak sebesar itu, dan ukuran React berasal dari banyak hal kecil yang dilakukannya untuk membantu Anda. Anda mengutip API kecil React sebagai alasan bahwa kode React harus kecil, tetapi pertanyaan yang lebih baik mungkin adalah, "Bagaimana API React bisa menjadi begitu sederhana mengingat semua hal yang dilakukannya untuk Anda?"

… Tapi itu pertanyaan yang sama sekali berbeda. :) Harap saya menjawab pertanyaan Anda - senang untuk memperluas jika saya tidak melakukannya.

— Sophie Alpert
sumber
4
Anda benar-benar menjawab pertanyaan saya. Bereaksi itu luar biasa. Saya sedang berpikir untuk menggunakannya untuk seluler jadi ukuran itu penting. Hanya saja tidak banyak informasi seputar apa yang dilakukannya. Dan saya berpikir bahwa ada lebih banyak trik yang bisa saya gunakan :) Saya merasa bahwa saya bisa menyingkirkan hal-hal jquery. Dan paulmillr / exoskeleton tepat pada waktunya :)
— Eldar Djafarov
2
Saya sedang menggali konsep yang sama sekali berbeda tentang pembuatan aplikasi. Periksa vimeo.com/78151404 dan github.com/component/component - menggunakan yang tidak Anda perlukan sama sekali dan compy bermain bagus dengan jsxtransformations. Dan React melakukan pekerjaan tersulit - yang lainnya (Model, perutean, komunikasi server) dapat dilindungi oleh komponen mikro.
— Eldar Djafarov
30
Catatan, kami menggunakan React di situs mobile Facebook di mana ukuran sangatlah penting :)
— Vjeux
4
@lightblade Um ... tidak. Penggunaan memori bergantung pada berapa banyak alokasi yang dibuat kode Anda. React berusaha keras untuk menghindari alokasi.
— Dan Abramov
2
@ 1nfiniti Oke, diperbarui dengan beberapa nomor baru karena sudah dua setengah tahun.
— Sophie Alpert
-1

Beberapa pemikiran .. Saya memiliki beberapa masalah yang sama dengan ukurannya, tetapi setelah menggunakannya, bukan lelucon, saya akan menggunakannya jika ukurannya 5MB. Itu bagus. Karena itu, saya memutuskan untuk mengurangi ketergantungan pada perpustakaan lain sebanyak mungkin. Saya menggunakan jquery untuk dua hal .. ajax dan respons ajax otomatis dan penanganan permintaan (beforeSend, dll) yang akan menangani ketika token berada dalam respons setelah login, dan kemudian memastikan setiap permintaan ajax menambahkannya ke header Otorisasi sebelumnya mengirim. Saya mengganti ini dengan sedikit javascript asli yang sangat kecil. Bekerja dengan baik. Juga, saya mencoba menggunakan _underscore. Saya telah menggantinya dengan lodash, yang lebih kecil dan lebih cepat, meskipun saat ini saya tidak menggunakannya jadi boleh menghapusnya sama sekali.

Berikut adalah satu artikel, dari sekian banyak artikel di Google, yang saya temukan memiliki beberapa alternatif menggunakan native JS daripada jquery.

http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/

— pengguna3317868
sumber
1
Anda juga bisa membuat versi khusus jQuery dengan bagian-bagian yang Anda gunakan jika Anda menargetkan banyak browser
— Dan Heberden
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.