VueとWebpackのツリーシェイク、sideEffects、CSS：未使用コンポーネントのCSSファイルをロード
P粉068174996
2023-08-25 10:22:08
<p>Webpack を使用する場合に、Vue の単一ファイル コンポーネントで CSS ツリーを処理する正しい方法を見つけようとしています。 </p>
<p>package.json には、<code>"sideEffects": ["*.css", "*.less","*.vue" ]</code>, This があります。 Vue コンポーネントがロードされるべきではないときにロードされるのを正しく防止しているようです。ただし、単一の <code><style></code> タグはすべてページに読み込まれます。 </p>
<p>一連のエクスポートをリストする NPM パッケージから SFC をロードします。例: </p>
<pre class="brush:php;toolbar:false;">何とか 'blah.vue' からエクスポート;
「blah2.vue」から blah2 をエクスポートします。
'blah3.vue' から blah3 をエクスポートします;</pre>
<p>JavaScript に <code>import { blah3 } from 'a-npm-package';</code> があるだけでも、3 つのコンポーネントすべてのスタイルが含まれます。多数の Vue コンポーネントがあるため、多くの未使用の CSS がページに追加されることになります。 </p>
<p>これを防ぐにはどうすればよいでしょうか?たとえ 1/10 しか使用されなかったとしても、スタイルを単にページにすべてダンプするのではなく、スタイルを処理するより優れた、より動的な方法が確実にあります。 </p>
<p>ありがとうございます</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
MiniCssExtractPlugin を使用して、CSS ツリーのシェイキングを実行できます。 scss または sass を使用している場合は、これらのローダーも追加できます。 リーリー