この記事では、著者がWebpackとVueを使用してCSSファイルのサイズを劇的に増加させる方法のストーリーを説明し、最終的にこの問(wèn)題を改善した方法で解決しました。ページサイズの増加を奨勵(lì)する代わりに、この記事は、BulmaフレームワークとVue CLIを使用する過(guò)程で遭遇した皮肉なビューとソリューションを示しています。

免責(zé)事項(xiàng)：この記事は皮肉です。著者は、彼が読者よりも賢いとは思わず、Webページのサイズを大きくすることは良いことだとも考えていません。

多くの記事は、ページサイズを削減する方法を教えています。寫(xiě)真の最適化、冗長(zhǎng)なCSSルールを削除します。著者は、ページサイズの縮小を指摘するための例としてウォルマートを採(cǎi)用します。

JavaScriptの最適化の提案：

？§古い依存関係と重複依存関係を削除しますか？大きな依存関係を小さな依存関係に置き換えますか？それが過(guò)剰溶力であるかどうかを確認(rèn)しますか？ A/Bテスト構(gòu)成をクリーンアップしてくださいcodeコード分割！

ウォルマートはウェブサイトでこれを行いました。 JSパッケージは69％削減されます。相互作用時(shí)間は28％短縮されました。

ただし、ページサイズを増やす方法を教えてくれる記事はほとんどありません。著者は関連情報(bào)を見(jiàn)つけようとしましたが、フォントサイズの増加に関する記事のみを見(jiàn)つけました。

予期しない「體重増加」

なぜページサイズを増やすのですか？これは低帯域幅ユーザーにとって良いことではありませんか？著者は一見(jiàn)合理的であるが、実際には少し面白い理由を與えます：

1. ギガビット帯域幅があり、テネシー州に住んでいます（ネットワークが優(yōu)れていることを示唆しています）。
2. ブラウザはキャッシュされ、ウェブサイトを1回ダウンロードするだけです。
3. あなたは「仕事のためではなく、人生のために働く」ため、誰(shuí)かがあなたのウェブサイトに訪れるかどうかは気にしません。

これらの理由に同意した場(chǎng)合、著者はCSSサイズを1500％増加させる方法を示します。

素晴らしいヒント

著者は、プロジェクトをBulma CSSフレームワークに向けてリファクタリングする際に、この問(wèn)題を発見(jiàn)しました。最初のコードは混oticとしており、SASSコードは「ハウスカー」ショーのシーンのようなものでした。

Bulmaには、モーダルボックスなどの機(jī)能が含まれます。著者は、サードパーティのVueコンポーネントを使用しました。また、ハンバーガーメニューもあります。これは、成功するWebサイトのための有名な必須要素であるためです。

再建が完了した後、著者はCSSサイズが大幅に増加することを発見(jiàn)しました。最初の手書(shū)きコードはわずか30kb（GZIP圧縮後）で、再構(gòu)築後、260kbに達(dá)しました。 Vue Cliもこれについて警告しましたが、著者はそれを無(wú)視しました。

著者はプロジェクトを生産環(huán)境に展開(kāi)し、Twitterでこの「成果」を発表しました。 Bulmaの作成者であるJeremy Thomasは、これに対応し、多數(shù)の重複スタイルが存在するため、CSSサイズが増加したことを指摘しました。

問(wèn)題があります

著者は、彼がCSSとSASSについてあまり知らないことを認(rèn)めています。 Vue CLIプロジェクトを使用すると、著者はsrc/stylesフォルダーを作成し、一部のBulmaコンポーネントをインポートするbulma-but-not-all-of-bulma-only-some-of-it.scss scssファイルを作成しました。次に、ファイルをカスタムSASSファイルsite.scssにインポートします。scss。

各コンポーネントでこれらのスタイルを使用するために、著者は、 vue.config.jsファイルを変更して、Sarah Drasnerのブログ投稿のメソッドを使用してWebPackビルドプロセスを変更しました。

著者が理解していないのは、このアプローチが各VueコンポーネントにSASSをインポートすることです。これにより、Vueは各コンポーネントにdata-v-屬性を追加するため、多くの重複スタイルが生じます。

scopedを扱う方法

Vueは、 data-プロパティを動(dòng)的に挿入することによって実裝されるコンポーネントに制限されるスタイルスコープを許可します。コンポーネントにスタイルを含むSASSファイルをインポートする場(chǎng)合、VUE（WebPack経由）の名前の名前は、動(dòng)的なdata-プロパティを備えています。

可変共有の問(wèn)題

SASS変數(shù)を1つのコンポーネントに定義し、別のコンポーネントに參照することはできません。

BulmaとVueを使用するためのベストプラクティス

この問(wèn)題を解決するために、著者は3つのファイルを使用することを推奨します： variables.scss （Bulma変數(shù)をインポート）、 bulma-custom.scss （インポートバルマコンポーネント）、およびsite.scss （グローバルスタイルの定義）。 site.scssをmain.jsファイルにインポートし、 vue.config.jsファイルにvariables.scssを追加します。

このようにして、BULMAはグローバルに利用可能であり、すべてのBULMA変數(shù)に各コンポーネントでアクセスできます。 CSSサイズは最終的に大幅に減少しました。

改善されたソリューション

著者はまた、Vue CLIプロジェクトでBulmaをカスタマイズする方法を説明するPRをBulmaドキュメントに提出しました。

以上がWebpackとVueでページのサイズを1,500％増やす方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。