vite项目构建优化chunkSizeWarningLimit

vite项目构建优化chunkSizeWarningLimit

构建项目时，经常会遇到下面这样的分块儿建议提示，主要的意思单个模块文件超过了默认块儿限制，建议进行代码分块儿后进行动态导入可以加速页面加载速度。

$ pnpm run build

> demo@0.0.0 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.

解决方法

两种方案：

1. 上调限制的上限，比如又 500KB 调整到 1500KB
2. 将代码分割成多个chunk。

下面是一个完整的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

> demo@0.0.0 build /codes/vue-demos/demo
> vite build

vite v3.0.9 building for production...
✓ 92 modules transformed.
Generated an empty chunk: "@vue_devtools-api@6.2.1"
Generated an empty chunk: "vue@3.2.37"
dist/index.html                                       1.14 KiB
dist/assets/@vue_devtools-api@6.2.1.1dfaf4cc.js       0.00 KiB / gzip: 0.02 KiB
dist/assets/index.0253962c.js                         7.70 KiB / gzip: 3.35 KiB
dist/assets/@vue_reactivity@3.2.37.37198664.js        9.04 KiB / gzip: 3.53 KiB
dist/assets/@vue_runtime-dom@3.2.37.c1546101.js       6.60 KiB / gzip: 3.03 KiB
dist/assets/@vue_shared@3.2.37.d1f3c7cb.js            3.30 KiB / gzip: 1.61 KiB
dist/assets/vue@3.2.37.2d75cf7d.js                    0.00 KiB / gzip: 0.02 KiB
dist/assets/vue-search-input@1.1.9.c3134eb9.js        3.32 KiB / gzip: 1.49 KiB
dist/assets/vue-search-input@1.1.684e686c.css         2.30 KiB / gzip: 0.72 KiB
dist/assets/axios@0.27.2.ef231355.js                  19.01 KiB / gzip: 7.38 KiB
dist/assets/index.b5ddd979.css                        5.55 KiB / gzip: 1.71 KiB
dist/assets/vue-router@4.1.4_vue@3.2.37.6b4f1a3c.js   22.21 KiB / gzip: 9.13 KiB
dist/assets/@vue_runtime-core@3.2.37.b3417a24.js      36.99 KiB / gzip: 15.41 KiB

这样，node_modules下的模块会被分成多个模块同时被加载，相对于线性加载单独的大文件来说，这样可以加速了页面加载速度。

总结

总的来说，虽然代码分块儿处理了，但分的块儿越多，产生的连接数就越多，建立连接也是耗时的，所以分块儿的数量也要合理控制才好。

听说一键三连点赞的朋友可以升职加薪哈！