javascript - Rollup + HoCs treeshaking
Saya sedang mencoba membuat perpustakaan komponen menggunakan typescript dan rollup.
Saya memiliki sebuah komponen, Canary.
function Canary() {
...
}
export default React.memo(Canary)
Perhatikan bagaimana Canary dibungkus dalam sebuah HoC (React.memo).
Saya memiliki komponen lain, SomeComponent
function SomeComponent() {
...
}
export default SomeComponent
Jika saya ingin membangun perpustakaan saya hanya dengan SomeComponent yang diekspor,
src/index.tsexport { default as SomeComponent } from './SomeComponent'
Perpustakaan ini dapat di-tree-shake. Namun, jika saya menambahkan komponen yang dibungkus dalam HoC, treeshaking gagal. Terlepas dari bagaimana saya mengimpor SomeComponent dari perpustakaan saya, Canary ikut terbawa bersamanya dan akhirnya masuk ke dalam bundle.
Saya menggunakan varian dari ini untuk mendeteksi apakah sesuatu bisa di-treeshake atau tidak, dimodifikasi untuk rollup.
Saya telah menemukan ini, yang membahas tentang bagaimana Anda dapat memberikan petunjuk pada alat seperti webpack. Saya telah menyiapkan proyek percobaan menggunakan NextJS (webpack digunakan secara internal), dan menambahkan sideEffects: false ke package.json perpustakaan saya tanpa hasil - Namun, saya tidak berpikir bahwa kode saya yang merusak tree-shaking, saya pikir itu adalah React.memo HoC. Itu perlu ditandai pure dalam distribusi.
yaitu mengedit baris keluaran secara manual
var index = React.memo(Canary);
export { index as Canary }
ke
var index = /*#__PURE__*/memo(Canary);dan menjalankan ulang tes treeshaking berhasil.
Pertanyaan Apa cara yang tepat untuk memberi sinyal ke Rollup bahwa Anda ingin menandai sesuatu sebagai murni? Apakah saya bahkan menjalani ini dengan cara yang benar?