Gegaran pokok, sideEffects dan CSS Vue dan Webpack: Muatkan fail CSS komponen yang tidak digunakan
P粉068174996
2023-08-25 10:22:08
<p>Kami sedang cuba memikirkan cara yang betul untuk mengendalikan pepohon CSS dalam komponen fail tunggal Vue apabila menggunakan Webpack. </p>
<p>Dalam package.json, saya ada: <code>"sideEffects": ["*.css", "*.less","*.vue", This nampaknya betul menghalang komponen Vue daripada dimuatkan apabila ia tidak sepatutnya. Walau bagaimanapun, setiap teg <kod><style></code> akan dimuatkan ke halaman. </p>
<p>Kami memuatkan SFC kami daripada pakej NPM, yang menyenaraikan satu siri eksport, contohnya: </p>
<pre class="brush:php;toolbar:false;">eksport blah daripada 'blah.vue';
eksport blah2 daripada 'blah2.vue';
eksport blah3 daripada 'blah3.vue';</pre>
<p>Walaupun kami hanya mempunyai <kod>import { blah3 } daripada 'a-npm-package';</code> Memandangkan kami mempunyai banyak komponen Vue, ini menyebabkan banyak CSS yang tidak digunakan ditambahkan pada halaman. </p>
<p>Bagaimanakah kita menghalang perkara ini daripada berlaku? Pasti ada cara pengendalian gaya yang lebih baik dan lebih dinamik daripada hanya membuang semuanya ke dalam halaman, walaupun hanya 1/10 daripadanya digunakan. </p>
<p>Terima kasih</p>
Anda boleh menggunakan MiniCssExtractPlugin untuk melakukan gegaran pokok CSS. Jika anda menggunakan scss atau sass, anda boleh menambah pemuat ini juga.