WebpackとVueでページのサイズを1,500％増やす方法

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

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

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

JavaScriptの最適化の提案：

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

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

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

予期しない「体重増加」

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

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

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

素晴らしいヒント

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

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

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

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

問題があります

著者は、彼がCSSとSASSについてあまり知らないことを認めています。 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-プロパティを動的に挿入することによって実装されるコンポーネントに制限されるスタイルスコープを許可します。コンポーネントにスタイルを含むSASSファイルをインポートする場合、VUE（WebPack経由）の名前の名前は、動的なdata-プロパティを備えています。

可変共有の問題

SASS変数を1つのコンポーネントに定義し、別のコンポーネントに参照することはできません。

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

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

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

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

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

以上がWebpackとVueでページのサイズを1,500％増やす方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。