vite项目构建优化大文件分块儿chunkSizeWarningLimit

时间：2025-03-09 20:10:15

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/                       0.59 KiB
dist/assets/entry/    7.65 KiB / gzip: 3.37 KiB
dist/assets/file/    5.55 KiB / gzip: 1.71 KiB
dist/assets/file/   11.32 KiB / gzip: 2.20 KiB
dist/assets/chunk/   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  to improve chunking: /guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via .

解决方法

两种方案：

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

下面是一个完整的示例：

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

// /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/                                       1.14 KiB
...
dist/assets/vue-router@4.1.4_vue@3.2.37.   22.21 KiB / gzip: 9.13 KiB
dist/assets/@vue_runtime-core@3.2.37.      36.99 KiB / gzip: 15.41 KiB

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

总结

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

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

相关文章