-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ビルドツールViteの最適化を図りましょう #1122
Comments
This comment was marked as outdated.
This comment was marked as outdated.
代替ツール
|
SvelteKitアプリでビルド速度を向上させるための方法 1. 依存関係の最適化Viteは依存関係を事前にバンドルすることでビルド速度を向上させます。 // 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の設定など、さまざまな方法があります。これらの対策を組み合わせることで、ビルド速度を大幅に改善することができます。 |
SvelteKitアプリでViteを利用している場合に、画面のリロードが遅くなる一般的な原因と対策。 原因と対策
高速化のための方法
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のオーバーレイを無効にする
}
}
});
{
"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"]
}
まとめこれらの対策を実施することで、SvelteKitアプリのビルドやリロード時間を短縮し、開発体験を向上させることができます。まずは、ViteとTypeScriptの設定を見直し、不要な依存関係を削除することから始めると良いでしょう。 |
Background
WHAT
See
https://vitejs.dev/guide/performance
The text was updated successfully, but these errors were encountered: