前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vite2 打包的时候vendor-xxx.js文件过大的解决方法

vite2 打包的时候vendor-xxx.js文件过大的解决方法

作者头像
用户1174620
发布2022-05-09 19:39:39
1.8K0
发布2022-05-09 19:39:39
举报
文章被收录于专栏:更流畅、简洁的软件开发方式

vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了。

打包时遇到警告

输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk)

Some chunks are larger than 500kb after minification. Consider:

  • Using dynamic import() to code-split the application
  • Use build.rollupOptions.output.manualChunks to improve chunking: rollup.js
  • Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

由于打包时有些依赖包体积过于庞大,提示你进行配置分割;

https://rollupjs.org/guide/en/#outputmanualchunks

寻找解决方案

(好吧,官网是英文的,看不懂) 于是到网上找了一下,发现了一种解决方法。https://blog.csdn.net/weixin_41277748/article/details/116431789

代码语言:javascript
复制
  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (id.includes('node_modules')) {
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();
                }
            }
          }
      }
    }
  }

尝试了一下,确实可以分成多个文件,但是问题又来了,分成的文件有大有小,大文件可以接受,但是一堆几k的小文件看着就烦了,于是又想了想,发现可以这样。

代码语言:javascript
复制
   build: {
      sourcemap: true,
      outDir: 'distp', //指定输出路径
      assetsDir: 'static/img/', // 指定生成静态资源的存放路径
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              const arr = id.toString().split('node_modules/')[1].split('/')
              switch(arr[0]) {
                case '@kangc':
                case '@naturefw':
                case '@popperjs':
                case '@vue':
                case 'axios':
                case 'element-plus':
                  return '_' + arr[0]
                  break
                default :
                  return '__vendor'
                  break
              }
            }
          },
          chunkFileNames: 'static/js1/[name]-[hash].js',
          entryFileNames: 'static/js2/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        },
        brotliSize: false, // 不统计
        target: 'esnext', 
        minify: 'esbuild' // 混淆器,terser构建后文件体积更小
      }
    },

思路

按照模块分开打包,大模块独立打包,小模块合并打包,这样就不会出现一大堆小文件了。

补充

经过不断尝试发现,@kangc(@kangc/v-md-editor)也就是md的编辑器不能单独打包,会报错。 还有 axios 也不能单独打包,会报错。

代码语言:javascript
复制
 if (id.includes('node_modules')) {
              const arr = id.toString().split('node_modules/')[1].split('/')
              switch(arr[0]) {
                case '@naturefw': // 自然框架
                case '@popperjs':
                case '@vue':
                case 'element-plus': // UI 库
                case '@element-plus': // 图标
                  return '_' + arr[0]
                  break
                default :
                  return '__vendor'
                  break
              }
            }

这几个可以分开打包,其他的遇到再说。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 打包时遇到警告
  • 寻找解决方案
  • 思路
  • 补充
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档