vite project construction optimization chunkSizeWarningLimit

vite project construction optimization chunkSizeWarningLimit

When building a project, you often encounter the following chunking suggestion prompts. The main meaning is that a single module file exceeds the default chunk limit. It is recommended to dynamically import code after chunking to speed up page loading.

$ 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.

Solution

Two options:

1. Increase the upper limit of the limit, for example, adjust it from 500KB to 1500KB
2. Split the code into multiple chunks.

Here is a complete vite.config.jsexample:

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

The effect after successful modification is as follows:

$ 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

In this way, node_modulesthe following modules will be divided into multiple modules and loaded at the same time, which can speed up the page loading speed compared to linearly loading a single large file.

Summarize

In general, although the code is processed in blocks, the more blocks are divided, the more connections will be generated, and the establishment of connections is time-consuming, so the number of blocks should be controlled reasonably.

I heard that friends who click like three times in a row can get a promotion and a salary increase !