Next.js: ~50% byte yang tidak digunakan di app.js dengan Cakupan Alat Dev Chrome

Utilitas cakupan kode Chrome Dev Tools

—

Dalam produksi, tentu saja.

—

Terlepas dari CSS (pertama kali menggunakan styled-jsx dan perlu meningkatkan desain gaya bersama atau menggunakan sesuatu seperti styletron ) — apakah saya salah memahami fitur pemisahan kode otomatis?

Untuk memberikan beberapa konteks, saya menggunakan HOC untuk membungkus setiap halaman, dan saya melewati kedua metode dan alat peraga yang tidak selalu digunakan oleh setiap halaman. Selain itu: Saya mungkin ceroboh di sana-sini dengan beberapa impor; Saya menggunakan re-base yang saat ini mengimpor semua Firebase (tidak perlu dalam kasus penggunaan saya).

Apakah saya mungkin mencampur automatic code splitting webpack dengan static analysis and tree shaking a là rollup? Jika begitu,

1. Haruskah Selanjutnya melakukan pengguncangan pohon dan penghapusan kode mati?

2. Jika tidak, apakah Anda punya saran tentang cara mendekati dan menyelesaikan masalah ini? Hasil cakupan Chrome Dev Tools belum dapat diekspor secara sepele dan oleh karena itu saya tidak yakin bagaimana mengidentifikasi jalur kode yang tidak digunakan dan mengimpor dengan output yang diperkecil.

3. Apakah menggunakan sesuatu seperti webpack-rollup-loader mungkin dan masuk akal?

4. Bisakah salah satu dari ini mengarah pada peningkatan pada cara kerja Next yang sudah mengagumkan?

Terima kasih!