We’re lazy…
Update: it’s out now!
https://reactjs.org/blog/2018/10/23/react-v-16-6.html
Berawal dari Tweet om Dan ini
{{< tweet 1053278800610557952 >}}
Ya, React.Lazy() ini menjadi impian pada developer. Dengan React.Lazy() kita bisa import komponen lain secara lazy dan membuat code-splitting semakin mudah. Sebelum React.Lazy() biasanya harus menggunakan loadable (https://github.com/jamiebuilds/react-loadable).
Tapi kan di atas baru RFC, kalau kita mau pakai lazy loading di React tanpa loadable bisa gak? Bisa jawabannya, justru tulisan ini untuk membahas ini.
Pada dahulu kala ketika saya menjadi Head of Engineering di salah satu Startup Media dan Event terbesar di Asia, ada roadmap untuk revamp mobile website menjadi lebih ringan dan modern, salah satunya menjadi PWA.
Website sebelumnya (yang saat ini juga masih) seluruh bundle JavaScript di-download pada saat pertama kali. Apapun itu, dari code login, user profile, settings, dsb. Secara performance tidak terlalu baik karena user mendownload apa yang mereka belum butuhkan. Soal tips performance, saya tidak akan bahas lagi karena ada tulisan yang lebih lengkap dari Irfan Maulana ini.
Berbagai best practice yang bisa kita pelajari dan optimalkan dalam memuat halaman website
Pada website baru ini (yang akhirnya tidak pernah publish dan selesai karena sesuatu-hal-yang-tidak-bisa-diceritakan), kami memutuskan menggunakan Lazy Loading dan Code Splitting di React.
Akhirnya setelah berkelana di Internet (dan tentunya StackOverflow), kami membuat ini
{{< gist praditautama d89e162538e8354668164e7c30049fbf >}}
Cara memanggilnya
{{< highlight go "linenos=inline" >}}
import asyncComponent from 'commons/AsyncComponent'
const Button = asyncComponent(() => import('./Button'))
{{</ highlight >}}
Mirip yang di Tweetnya om Dan? Tapi ini ada drawbacks, menurut R AdySurya A ada memory leak dan harus cancel promise setiap unmount component lewat componentWillUnmount .
Semoga code snippet di atas bermanfaat dan berguna.
Happy coding!