ビルドツールViteの最適化を図りましょう

KATO-Hiro commented 1 month ago

Background

コンポーネントが増えてきたためか、ローカルサーバのリロードがかなり遅くなってきた
- 待ち時間を少しでも減らしたいので、高速に処理できるツールが望ましい
- 移行をスムーズにするため、Viteやvitestとの互換性があって欲しい

WHAT

Viteの設定を見直すのが先では? + PCの買い替えも検討
- SvleteKitを採用したことのデメリットとして、各種ツールのサポートが受けられないケースが多い
- 互換性が担保できないのが痛い

See

https://vitejs.dev/guide/performance

KATO-Hiro commented 4 weeks ago

Issues

[ ] 2024年8月時点では、Svelte Kitには未対応（本家の issues/1026 で確認済）
- %sveltekit.head% をコメントアウトしないと、以下のエラーが発生
- HTMLのparseに失敗している?
- %sveltekit.body% がプレースホルダーではなく、単なる文字列として処理されている

[ Farm ] Error: Parse `src/app.html` failed.
 Error: Parse `src/app.html` failed.
 Error:   × Stray end tag "head"
    ╭─[src/app.html:8:1]
  5 │         <link rel="icon" href="%sveltekit.assets%/favicon.png" />
  6 │         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 │         %sveltekit.head%
  8 │     </head>
    ·     ───────
  9 │     <body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-800">
 10 │         <div style="display: contents">%sveltekit.body%</div>
 11 │     </body>
    ╰────
  × Start tag "body" seen but an element of the same type was already open
    ╭─[src/app.html:9:1]
  6 │         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 │         %sveltekit.head%
  8 │     </head>
  9 │     <body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-800">
    ·     ────────────────────────────────────────────────────────────────────────────
 10 │         <div style="display: contents">%sveltekit.body%</div>
 11 │     </body>
 12 │ </html>
    ╰────

Potential Causes:
1.The module have syntax error.
2.This kind of module is not supported, you may need plugins to support it

Potential Causes:
1.The module have syntax error.
2.This kind of module is not supported, you may need plugins to support it

KATO-Hiro commented 3 weeks ago

代替ツール

Farm
- これまでのツールよりも高速
- dev、prodで一貫した環境
- 既存のツールとの互換性がある
- 懸念事項
- Svelte、SvelteKitに対応しているか?
  - 2024年8月時点では、SvelteKitは未対応
- 移行が簡単か?
  - Issueを読んでいる感じだと、移行よりも新規作成時に導入することを主眼においている気がする。
  - 互換性の問題と主要メンテナーは突っぱねているが、SvelteKitに対応するのが難しい + 優先度も低めという感じがする
- https://www.farmfe.org/
- https://github.com/farm-fe/farm/tree/main/examples/vite-adapter-svelte
- https://github.com/sveltejs/kit/blob/main/packages/kit/src/exports/vite/dev/index.js
- https://azukiazusa.dev/blog/new-build-tool-farm/
esbuild
- Go製
- Viteの内部でも使われているので、SvelteKitにおいては互換性が高い
- 移行のメリットがあまり感じられないのは気のせい?
- ビルドが高速になることは書かれているが、リロードに関しては言及なし
- preview相当の機能がないので、自前で用意する必要がある。これは他のツールもほぼ同じ
- https://esbuild.github.io/
Parcel
- Rust製
- 初期設定が少なくて済む
- SvelteKitもプラグインで対応できる可能性も
- esbuildのパフォーマンス比較だと40倍くらい遅い
- 同ツールに限らず、都合のいい比較をしている可能性もある
- https://parceljs.org/
- https://github.com/parcel-bundler/parcel
Rspack
- Rust製
- webpackとの互換性が高い
- vitestとの互換性はなさそう
- https://rspack.dev/
- https://github.com/web-infra-dev/rspack
- https://github.com/web-infra-dev/awesome-rspack

KATO-Hiro commented 3 weeks ago

SvelteKitアプリでビルド速度を向上させるための方法

1. 依存関係の最適化

Viteは依存関係を事前にバンドルすることでビルド速度を向上させます。optimizeDepsオプションを使用して、依存関係の事前バンドルを設定します。

// vite.config.js
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],
  optimizeDeps: {
    include: ['some-large-dependency'],
    exclude: ['some-unnecessary-dependency']
  }
});

2. キャッシュの利用

Viteはデフォルトでキャッシュを利用しますが、キャッシュの設定を見直すことでビルド速度を向上させることができます。

// vite.config.js
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],
  cacheDir: 'node_modules/.vite_cache'
});

3. コードスプリッティング

コードスプリッティングを使用して、アプリケーションを複数のチャンクに分割することで、初期ロード時間を短縮できます。

// vite.config.js
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['some-large-dependency']
        }
      }
    }
  }
});

4. 開発サーバーの設定

開発サーバーの設定を見直すことで、パフォーマンスを向上させることができます。

// vite.config.js
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    fs: {
      strict: true
    },
    watch: {
      usePolling: true,
      interval: 100
    }
  }
});

5. プラグインの最適化

不要なプラグインを削除したり、プラグインの設定を見直すことでビルド速度を向上させることができます。

6. ホットモジュールリプレースメント（HMR）の設定

HMRの設定を見直すことで、開発中のビルド速度を向上させることができます。

// vite.config.js
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    hmr: {
      overlay: false
    }
  }
});

7. 依存関係のアップデート

依存関係を最新バージョンにアップデートすることで、パフォーマンスが向上する場合があります。

npm update

8. Esbuildの利用

Viteは内部でEsbuildを使用していますが、設定を見直すことでさらにパフォーマンスを向上させることができます。

// vite.config.js
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],
  esbuild: {
    target: 'esnext',
    minify: true
  }
});

9. ファイルの監視設定

ファイルの監視設定を見直すことで、リロードのパフォーマンスを向上させることができます。

// vite.config.js
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    watch: {
      ignored: ['**/node_modules/**', '**/.git/**']
    }
  }
});

10. モジュールの分割

大きなモジュールを小さなモジュールに分割することで、ビルド時間を短縮できます。これにより、変更があった部分だけを再ビルドすることができます。

11. SSR（サーバーサイドレンダリング）の設定

SSRを使用する場合、設定を見直すことでビルド速度を向上させることができます。

// svelte.config.js
import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess(),
  kit: {
    adapter: adapter(),
    target: '#svelte',
    ssr: {
      noExternal: ['some-large-dependency']
    }
  }
};

まとめ

SvelteKitアプリのビルド速度を向上させるためには、依存関係の最適化、キャッシュの利用、コードスプリッティング、開発サーバーの設定、プラグインの最適化、HMRの設定、依存関係のアップデート、Esbuildの利用、ファイルの監視設定、モジュールの分割、SSRの設定など、さまざまな方法があります。これらの対策を組み合わせることで、ビルド速度を大幅に改善することができます。

KATO-Hiro commented 3 weeks ago

SvelteKitアプリでViteを利用している場合に、画面のリロードが遅くなる一般的な原因と対策。

原因と対策

大量のコンポーネント
- コンポーネントが多いと、ビルドやホットリロードの際に処理が遅くなることがあります。
依存関係の多さ
- 多くの依存関係があると、ビルド時間が長くなることがあります。
Viteの設定
- Viteの設定が最適化されていない場合、ビルドやリロードが遅くなることがあります。

高速化のための方法

Viteのキャッシュを有効にする
- Viteはデフォルトでキャッシュを利用しますが、設定を確認してキャッシュが有効になっていることを確認します。
依存関係の最適化
- 不要な依存関係を削除し、必要な依存関係のみをインストールします。
Viteの設定を最適化する
- vite.config.jsファイルを最適化します。以下に例を示します。

import { defineConfig } from 'vite';
import svelte from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  optimizeDeps: {
    include: ['some-large-dependency'],
    exclude: ['some-unnecessary-dependency']
  },
  build: {
    sourcemap: false, // ソースマップを無効にすることでビルド時間を短縮
    minify: 'esbuild', // esbuildを使用してビルドを高速化
    target: 'esnext' // 最新のJavaScript仕様をターゲットにする
  },
  server: {
    hmr: {
      overlay: false // HMRのオーバーレイを無効にする
    }
  }
});

TypeScriptの設定を最適化する
- tsconfig.jsonファイルを最適化します。以下に例を示します。

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "isolatedModules": true,
    "moduleResolution": "bundler",
    "outDir": "build",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": false, // ソースマップを無効にする
    "strict": true
  },
  "include": ["src/**/*.d.ts", "src/*", "src/**/*.ts", "src/**/*.svelte"],
  "exclude": ["node_modules"]
}

ホットモジュールリプレースメント（HMR）の最適化
- HMRの設定を最適化することで、リロード時間を短縮できます。
依存関係のバンドル
- 大きな依存関係を事前にバンドルすることで、ビルド時間を短縮できます。

まとめ

これらの対策を実施することで、SvelteKitアプリのビルドやリロード時間を短縮し、開発体験を向上させることができます。まずは、ViteとTypeScriptの設定を見直し、不要な依存関係を削除することから始めると良いでしょう。

KATO-Hiro commented 2 weeks ago

https://github.com/ankitects/anki/blob/main/ts/vite.config.ts

AtCoder-NoviSteps / AtCoderNoviSteps