VueとWebpackのツリーシェイク、sideEffects、CSS:未使用コンポーネントのCSSファイルをロード
P粉068174996
P粉068174996 2023-08-25 10:22:08
0
1
602
<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>
P粉068174996
P粉068174996

人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート