vite项目构建优化chunkSizeWarningLimit

最新推荐文章于 2025-06-07 22:54:02 发布

根叔的修行笔记

最新推荐文章于 2025-06-07 22:54:02 发布

阅读量4.4k

点赞数 2

分类专栏：项目实战经验文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/dragonballs/article/details/126694985

版权

项目实战经验专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何通过调整Vite配置来解决chunk大小超过500KB的警告，包括上调chunkSizeWarningLimit限制和使用手动代码分割。通过示例展示了修改vite.config.js后的效果，将node_modules下的模块拆分为多个chunk，从而加速页面加载。虽然代码分块能提高加载速度，但过多的chunk也会增加连接数，因此需要适度控制分块数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.

解决方法

两种方案：

上调限制的上限，比如又 500KB 调整到 1500KB
将代码分割成多个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下的模块会被分成多个模块同时被加载，相对于线性加载单独的大文件来说，这样可以加速了页面加载速度。