viewを変更するのにわずか5分。

木の揺れとは何ですか？そして、なぜあなたのウェブのパフォーマンスにとってそれが重要なのですか？

Juy 9、2025

長い間、読みたいですか？

Webはタートルがrawい回っているようにゆっくりとロードしますか？すべてのWebの人々が遭遇しなければならない問題

私たちがうまくやろうとしているウェブサイトが、美しく、完全なものの両方であると感じたことはありますか？しかし、実際にそれを使用する時が来たとき、「ゆっくり」はイライラしますか？顧客が入ってきて、ウェブサイトが終了する前に長い間待たなければなりません。多くの人はそれに耐えることができません。当社の製品やサービスを見る前に、衝撃的な統計でさえWebをダウンロードするのにほんの数秒であるため、直帰率（クリック率）が上昇し、変換率が低下する可能性があります。これは、魅力のないデザインによって引き起こされない本当の問題ですが、あなたに警告しているのはウェブサイトの「パフォーマンス」です。

‍

プロンプト：ユーザーの画像は、コンピューター画面やモバイルを見つめながら、イライラした表現を示しています。ワイン積み込みシンボルがあることは、ダウンロードWebサイトを待っているという感覚を伝えます

なぜウェブが遅いのですか？使用されていないコードのソース（ただし、ダウンロードする必要があります）

より複雑なWebサイトの時代には、React、Vue、さらにはシステムにプラグインを追加するなど、ライブラリまたはフレームワークを使用してより簡単かつ高速にする傾向があります。これらのツールには多くの場合、大量のJavaScriptコードが付属していますが、問題はWebページにあります。インポートするコード全体の10〜20％のみを呼び出すことができますが、ユーザーのブラウザは使用しない「全体」コードをダウンロードする必要があります。 JavaScriptファイルサイズ（バンドルサイズ）を必要よりも大きくしてください。大きなピザを注文したように、残りのピザも持ち帰らなければならないのは1つだけです。これが、あなたのウェブサイトがそれを知らずに「太っている」と「遅い」という主な理由です。

‍

プロンプト：インフォグラフィック画像は2本の木を比較します。 1つの木には完全な枝があります。（ライブラリのすべてのコードの代わりに）、別のツリーには必要な枝のみがあり、青々とした葉があります。（実際のアクティブコードの代わりに）最初のツリーから2番目のツリーに向けられた矢印が「未使用コード」というメッセージが殺されました。

「FAT」Webサイトを引き続き発生させますか？

ウェブサイトに使用されていないコードがあると、私が思っているよりもはるかに悪い影響があります。それは単なるゆっくりとした感情の問題ではありません。しかし、それはあなたのビジネスとあなたのSEOランクに直接影響します：

Core Web Vitals Drops：多くのJavaScriptをロードするWebサイトは、ブラウザの操作をブロックし、LCP（最大のコンテンツフルペイント）とINP（インタラクティブからネクストペイント）を悪化させます。
SEOランキング：悪いバイタルの場合、Googleはあなたのウェブサイトがユーザーに悪い経験を提供していることを確認します。そして、あなたのランクを簡単に同意させるかもしれません
ユーザーが逃げる：誰も待つのが好きではありません。あなたのウェブサイトが遅い場合、ユーザーは押して閉じてウェブ上の競合他社をより速く見つけます。
コンバージョン率は低下しました：ユーザーが視聴者を顧客に変更する（変換）すべての機会を逃れたとき、ほぼゼロです。

言い換えれば、使用されていないコードからウェブサイトに「脂肪」過剰を持たせる。それはあなた自身のビジネスチャンスを破壊するようなものです。レンダリングブロッキングリソースは、見落とすべきではないものです。

‍

プロンプト：否定的な結果を示す3グラフ画像：1 'SEOランキング'、2番目のバー、ユーザーのフラスト化「上昇」、3番目の「変換レート」が簡単なアイコンを使用して配管します。

「木の揺れ」、余分なコードを削減するのに役立つヒーロー。

このイベントのヒーローです。 **木の揺れとは何ですか？ **最も簡単な答えは、プロセス「死んだコードサラダ（死んだコード）左」です。葉を乾燥させるために「揺れる」木を想像してください。死者は落ちた。コードライティングの世界でまだ新鮮で強力な枝と葉のみを残すことは、Bundler（ WebpackやRollupなどのさまざまなコードファイルを組み合わせたツール）がプロジェクトの両方を分析するプロセスです。次に、「function」、 `variable`、またはmodule`を探してください` `sdpoをインポートしますが、使用することはありませんか？「本当に必要なコードのみを残して、ウェブサイトを大幅にダウンロードする原因

‍

プロンプト：アニメーションまたはインフォグラフィック画像にプロセスが表示されます。1。大型ボックスには多くのコードがあります。（使用されているものと未使用の両方）は、「Tree Shaking Bundler」という名前のマシンに流れます。 2。一部のコードはゴミに分離されています。 3.結果は小さな箱です。必要なコードのみを使用します

本物の例：ファイルサイズ70％を減らします。木を振るだけです。

プロジェクト管理のためのWebアプリケーション開発会社があるとしましょう。最初は、大規模なUIライブラリを使用しているため、アプリの作業は非常に遅かったが、開発チームを使用するコンポーネントはごくわずかで、メインのJavaScriptファイルが1.5MBであることを発見しました。ビルドプロセスをチェックした後、彼らは、開発モードで木の揺れが正しく活性化されないことを発見しました。

チームは、制作のビルド時に正しく動作するようにWebパックの設定を改善しました。その結果、木が揺れます。使用されていないコンポーネントを分析およびカットできます。 JavaScriptファイルの最終サイズは、1.5MBから450kbのみに削減され、**はほぼ70％に削減されます！ **ウェブサイトは2秒以上ダウンロードされています。ユーザーエクスペリエンスも改善されました。これは、コードの「脂肪切断」の力です。

‍

プロンプト：明らかに前後：「前」、1.5MBのファイルサイズのグラフで、ダウンロードページが遅い。「After」は450kbのファイルサイズを示すグラフで、ユーザーの笑顔でダウンロードが完了したのと同じWebページがあります。

木の揺れをやりたい、どうすればよいですか？（開発者のチェックリスト）

あなたのプロジェクトが木の揺れから完全に役立つと確信したい開発者にとって。これは、すぐにフォローできる簡単なチェックリストです。

ES2015モジュールの構文（「インポート」と「エクスポート」：ツリーの揺れは静的分析に依存しています。これは、「インポート/エクスポートのインポル（ESモジュール）に最適なものであるため、クライアントサイドコードでのCommanjsの使用を避けてください。MDNWebDocs
バンドラーを正しく設定します。Webpackの場合、「モード： '生産」を設定するだけで、ツリーの揺れやその他の最適化が自動的に有効になります。
副作用に注意してください。 「JSONのPackage.jsonのファイル」では、キー「サイドエフェクト」を探してみてください。バンドラーに「このパッケージのコードには、インポートを削減できない副作用がありません」と伝えます。これは、より効率的に仕事に戻るのに役立ちます。
結果をご覧ください。 「Webpack-Bundle-Analyzer」などのツールを使用して、最後のバンドルファイルで表示します。不要なコードはありますか？全体像を見て、改善する必要があるポイントを見つけるのに役立ちます。

パフォーマンスの改善は、木の揺れだけではありません。アイランドアーキテクチャやフォントロード戦略などの他の手法は、勉強する必要があるものです。

‍

プロンプト：各アイコンのチェックリスト画像：JavaScript ES6アイコン、構成アイコン、副作用、および分析して、理解しやすく使用できます。

人々が木の揺れについて疑問に思う傾向がある質問

CSSで木の揺れを使用できますか？
わかった！同様に機能するPurgecsなどのツールがあります。 HTMLおよびJavaScriptファイルをスキャンして、どのクラス名が使用されているかを確認します。最終ファイルから使用されていないCSSが削除されます。 CSSファイルサイズを効率的に削減するのに役立ちます

揺れを揺さぶると、ミニフェットとはどう違うのですか？
違いは明らかです。縮小とは、ギャップ、新しい行、変数名の短縮など、コードから不要な文字を削除することです。しかし、すべてのコード（ロジック）はまだ完了しています。木の揺れは、役に立たない「ブログ全体を削除する」ことです。両方の手法は、最小のファイルを取得するために一緒に使用されることがよくあります。

あなたは毎回自分で木を揺さぶる必要がありますか？
必要なし。ほとんどの場合、最新のフレームワーク（next.js、Create React App、Vue CLIなど）は、バンドラー（Webpack）を自動的に設定します。生産モードでビルドを注文するとき、私たちの義務は、フレンドリーになるためにコードを書くことです。

私のコードに副作用がある場合、何が起こりますか？
副作用は、インポート（グローバルオブジェクトの編集やCSSの追加など）とすぐに何かを行うコードです。これにより、プログラムが壊れることを恐れて、木の揺れがそのコードを切断しないようにする可能性があります。副作用を備えたファイルが必要な場合、値は「Package.json」に限定する必要があります。

‍

プロンプト：質問-2-3の大規模なQ＆Aアイコン画像は、読みやすい音声バブル形式の周りで実行されます。