Vue Academy · レッスン

Tree Shakingと自動インポート

Tree Shaking向けの名前付きexport、unplugin-vue-componentsの統合、resolver設定

レッスン 3/413 ステップ

「Tree Shakingと自動インポート」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

ツリーシェイキングとは

ツリーシェイキングとは、デッドコード除去のことです。バンドラーが、利用者がインポートしていないエクスポートを削除します。適切に構築されたライブラリなら、アプリには使用するコンポーネントだけが含まれるため、バンドルを小さく保てます。

名前付きエクスポートで有効にする

エントリーでは名前付きエクスポートを使い、各インポートを静的に解析できるようにします。すべてを保持する単一のデフォルトエクスポート（バレルオブジェクト）は、ツリーシェイキングできません。

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

デフォルトのバレルオブジェクトを避ける

すべてのコンポーネントを1つのオブジェクトとしてエクスポートすると、アプリが1つしか使わない場合でも、バンドラーはすべてを保持する必要があります。

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

利用者は必要なものをインポートする

名前付きエクスポートを使うと、利用者は使用するコンポーネントだけを分割代入し、残りはビルドから削除されます。

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

sideEffectsフィールド

バンドラーは、モジュールに副作用がある可能性を前提として保持します。package.json に "sideEffects": false を設定すると、モジュールが純粋で安全に削除できることを伝えられます。

{
  "sideEffects": false
}

CSSの副作用を宣言する

削除してはいけないCSSインポートがパッケージに含まれる場合は、それらを列挙して、そのファイルだけが保持されるようにします。

{
  "sideEffects": ["**/*.css"]
}

利用者向けの自動インポート

手動インポートの手間を省くため、ライブラリから unplugin-vue-components 用のリゾルバーを提供します。これにより、テンプレートで使用するコンポーネントが自動的にインポートされます。

npm install -D unplugin-vue-components

リゾルバーを提供する

リゾルバーは、使用されたコンポーネント名を受け取ると、そのコンポーネントのインポート元を返す関数です。パッケージからリゾルバーを提供します。

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

利用者側の設定

利用者は、提供されたリゾルバーを使ってプラグインを登録します。これで、テンプレートで使用したコンポーネントが自動的にインポートされ、ツリーシェイキングも維持されます。

// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [MyUiResolver()] })
  ]
});

自動インポートとツリーシェイキング

リゾルバーがテンプレートでの使用を実際の名前付きインポートに変換するため、使用したコンポーネントだけがバンドルされます。使いやすさと小さなバンドルの両方を実現できます。

グローバル登録を避ける

app.use ですべてのコンポーネントを自動登録するライブラリでは、ツリーシェイキングが機能しなくなります。名前付きエクスポートとオプションのリゾルバーを使い、利用者がコンポーネントごとに選択できるようにします。

理解度チェック

モジュールを安全にツリーシェイキングできることをバンドラーに伝える package.json の設定は何ですか。

対話的なレッスンで答える

まとめ

名前付きエクスポート（デフォルトのバレルオブジェクトは使いません）を使用し、"sideEffects": false を設定することでツリーシェイキングを有効にします（またはCSSを列挙します）。使いやすさのために、unplugin-vue-components のリゾルバーを提供します。利用者は使用するコンポーネントを自動インポートでき、必要なものだけがバンドルされます。また、グローバル登録を強制しないようにします。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「Tree Shakingと自動インポート」レッスンは無料ですか？

はい。「Tree Shakingと自動インポート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Tree Shakingと自動インポート」で何を学びますか？

Tree Shaking向けの名前付きexport、unplugin-vue-componentsの統合、resolver設定ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Tree Shakingと自動インポート」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る