Madogiwa Blog

主に技術系の学習メモに使っていきます。

Viteでpackage関連(node_modules)のファイルをvendor chunkに分割する方法

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()]
})

Building for Production | Vite

コードを読む限りだと、CSSでもstatic fileでもなくnode_modulesが含まれていたらvendorにchunkを分割するようになってるようですね。

github.com

Vite、こういった設定が簡単にできるようになっているの便利ですね!⚡