vite プロジェクト構築の最適化 chunkSizeWarningLimit
プロジェクトをビルドするとき, 次のチャンク提案プロンプトに遭遇することがよくあります. 主な意味は, 単一のモジュールファイルがデフォルトのチャンク制限を超えていることです. ページの読み込みを高速化するために, チャンク後にコードを動的にインポートすることをお勧めします.
$ pnpm run build
> [email protected] build /apps/code/nodejs/vue-demos/demo
> vite build
vite v3.0.9 building for production...
✓ 97 modules transformed.
dist/index.html 0.59 KiB
dist/assets/entry/index88af950d.js 7.65 KiB / gzip: 3.37 KiB
dist/assets/file/indexb5ddd979.css 5.55 KiB / gzip: 1.71 KiB
dist/assets/file/vendoref364db9.css 11.32 KiB / gzip: 2.20 KiB
dist/assets/chunk/vendor3fe3251a.js 1284.46 KiB / gzip: 442.74 KiB
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
解決
2 つのオプション:
- 制限の上限を増やします。たとえば、500KB から 1500KB に調整します。
- コードを複数のチャンクに分割します。
完全なvite.config.js例を次に示します。
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
server: {
proxy: {
"/api": {
target: "https://localhost",
changeOrigin: true,
secure: false,
},
},
},
plugins: [vue()],
build: {
chunkSizeWarningLimit: 1500,
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/.pnpm/')[1].split('/')[0].toString();
}
}
}
}
}
})
変更が成功した後の効果は次のとおりです。
$ pnpm run build
> [email protected] build /codes/vue-demos/demo
> vite build
vite v3.0.9 building for production...
✓ 92 modules transformed.
Generated an empty chunk: "@[email protected]"
Generated an empty chunk: "[email protected]"
dist/index.html 1.14 KiB
dist/assets/@[email protected] 0.00 KiB / gzip: 0.02 KiB
dist/assets/index.0253962c.js 7.70 KiB / gzip: 3.35 KiB
dist/assets/@[email protected] 9.04 KiB / gzip: 3.53 KiB
dist/assets/@[email protected] 6.60 KiB / gzip: 3.03 KiB
dist/assets/@[email protected] 3.30 KiB / gzip: 1.61 KiB
dist/assets/[email protected] 0.00 KiB / gzip: 0.02 KiB
dist/assets/[email protected] 3.32 KiB / gzip: 1.49 KiB
dist/assets/[email protected] 2.30 KiB / gzip: 0.72 KiB
dist/assets/[email protected] 19.01 KiB / gzip: 7.38 KiB
dist/assets/index.b5ddd979.css 5.55 KiB / gzip: 1.71 KiB
dist/assets/[email protected][email protected] 22.21 KiB / gzip: 9.13 KiB
dist/assets/@[email protected] 36.99 KiB / gzip: 15.41 KiB
このように、node_modules以下のモジュールが複数のモジュールに分割されて同時にロードされるため、1 つの大きなファイルを直線的にロードする場合に比べて、ページのロード速度を高速化できます。
要約する
一般にコードはブロック単位で処理されますが、ブロックを分割すればするほど、より多くの接続が生成され、接続の確立に時間がかかるため、ブロックの数は合理的に制御する必要があります。
友達が3回連続でクリックすると昇進と昇給ができるそうです！