簡単

Web

Viteのchunks警告を解消

React x Viteで、npm run build した際に出る警告が気になってました。

(!) Some chunks are larger than 500 kBs after minification. Consider:

Using dynamic import() to code-split the application
Use build.rollupOptions.output.manualChunks to improve chunking
Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

なんとか解消できないかCopilotに尋ねると、とっても簡単。Build以下を加えればいいというではありませんか。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          reactVendor: [
            'react',
            'react-dom',
            'react-router-dom',
            'react-icons',
            'react-scroll',
          ],
          uiLibs: [
            '@chakra-ui/react',
            '@emotion/react',
            '@emotion/styled',
            '@mantine/core',
            '@mantine/hooks',
          ],
          misc: ['eventemitter3'],
        },
      },
    },
  },
})

記述後、npm run buildすると、警告なく書き出されました。ソースを見てみると、以下のようになります。keyの名前で分割されているので、分割を増やして一つあたりのファイル数を軽くするのね。納得です。

<script type="module" crossorigin="" src="/assets/index-Cg_maGnU.js"></script>
<link rel="modulepreload" crossorigin="" href="/assets/reactVendor-Bjt9i7nP.js">
<link rel="modulepreload" crossorigin="" href="/assets/uiLibs-kkMKV0mJ.js">
<link rel="modulepreload" crossorigin="" href="/assets/misc-CjWCgyyc.js">

コメント