node_modules配下のpackageのchunckをvendor chunkに分割するといったWebpack時代の最適化手法をViteで再現する方法をMEMO📝
各チャンクと router で使ってる node_modules で、ライブラリがかなりの部分で重複してしまう。(react, vue など) なので、 vendor chunk という共通チャンクに追い出すテクニックがある。 Webpack チャンク最適 テクニック - Qiita
やり方は以下の通り、簡単でViteに付属しているsplitVendorChunkPlugin
を利用するだけです✨
(Vite v2.8以前はデフォルトでvendor chunkを分割する戦略になっていたようです)
You can continue to use the Split Vendor Chunk strategy by adding the splitVendorChunkPlugin in your config file
// vite.config.js import { splitVendorChunkPlugin } from 'vite' export default defineConfig({ plugins: [splitVendorChunkPlugin()] })
コードを読む限りだと、CSSでもstatic fileでもなくnode_modules
が含まれていたらvendor
にchunkを分割するようになってるようですね。
Vite、こういった設定が簡単にできるようになっているの便利ですね!⚡