【Vue3】vite打包报错：块的大小超过限制，Some chunks are larger than 500kb after minification

最新推荐文章于 2024-06-21 15:28:05 发布

phaple

最新推荐文章于 2024-06-21 15:28:05 发布

阅读量2.2k

点赞数

文章标签：前端 javascript Powered by 金山文档

原文链接：https://blog.csdn.net/sinat_36728518/article/details/123112966

版权

vite打包时报了超出大小限制的黄色警告

解决方法：

1.更改限制，在build里扩展chunkSizeWarningLimit，就不会有黄色警告了

chunkSizeWarningLimit: 1500

2.自定义构建，调整底层的 Rollup 选项

https://cn.vitejs.dev/guide/build.html

https://www.rollupjs.com/guide/tutorial

output.manualChunks
Type:    { [chunkAlias: string]: string[] } | ((id: string, {getModuleInfo, getModuleIds}) => string | void)

output: {
        manualChunks(id) {
            //打印所有资源
          console.log('id：',id)
        }
      }

rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            console.log('id：'+ id)
            return 'bags';
          }
        }
      }
    }

所有依赖会装入到bags，所以bags大小会大很多

3.自定义分类分隔

rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            console.log('before', id)
            console.log('after', id
            .toString()
            .split('node_modules/')[1]
            .split('/')[0]
            .toString())
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString()
          }
        }
      }
    }

打包后的文件数量多了，每个文件大小小很多

chunkFileNames输出静态资源的命名

chunkFileNames: (chunkInfo) => {
          console.log('chunkInfo', chunkInfo)
          console.log('facadeModuleId',chunkInfo.facadeModuleId)
          //分隔自己项目的文件
          const facadeModuleId = chunkInfo.facadeModuleId
            ? chunkInfo.facadeModuleId.split('/')
            : []
          return `js/${facadeModuleId[facadeModuleId.length - 2] || '[name]'}/[name].[hash].js`
        }