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

 更新时间:2022年03月20日 10:50:57   作者:金色海洋(jyk)  
vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,本文主要介绍了vite2打包的时候vendor-xxx.js文件过大的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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://www.jb51.net/article/241486.htm

  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (id.includes('node_modules')) {
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();
                }
            }
          }
      }
    }
  }

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

   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 也不能单独打包,会报错。

 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
              }
            }

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

到此这篇关于vite2打包的时候vendor-xxx.js文件过大的解决方法的文章就介绍到这了,更多相关vite2打包vendor-xxx.js文件过大内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ant design pro中可控的筛选和排序实例

    ant design pro中可控的筛选和排序实例

    这篇文章主要介绍了ant design pro中可控的筛选和排序实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue基于input实现密码的显示与隐藏功能

    vue基于input实现密码的显示与隐藏功能

    这篇文章主要介绍了vue基于input实现密码的显示与隐藏功能,文末给大家介绍了vue 如何实现切换密码的显示与隐藏效果,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • 基于vue封装一个带眼睛的密码子组件

    基于vue封装一个带眼睛的密码子组件

    这篇文章给大家介绍了基于vue封装一个带眼睛的密码子组件的方法,文章中有详细的代码讲解,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-09-09
  • 详解vue axios中文文档

    详解vue axios中文文档

    本篇文章主要介绍了详解axios中文文档,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue filter的几种用法示例小结

    vue filter的几种用法示例小结

    Vue.filter函数用于注册一个全局的过滤器,该过滤器可以在模板和组件中使用,这篇文章主要介绍了vue filter的几种用法示例小结,需要的朋友可以参考下
    2024-08-08
  • Vue结合高德地图实现HTML写自定义信息弹窗全过程

    Vue结合高德地图实现HTML写自定义信息弹窗全过程

    最近开发中遇到一个多个点绘制,并实现点击事件,出现自定义窗口显示相关信息等功能,下面这篇文章主要给大家介绍了关于Vue结合高德地图实现HTML写自定义信息弹窗的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue router权限管理实现不同角色显示不同路由

    vue router权限管理实现不同角色显示不同路由

    本文主要介绍了vue router权限管理实现不同角色显示不同路由,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue中如何将日期转换为指定的格式

    vue中如何将日期转换为指定的格式

    这篇文章主要介绍了vue中如何将日期转换为指定的格式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue父子组件的通信方法(实例详解)

    vue父子组件的通信方法(实例详解)

    这篇文章主要介绍了vue父子组件的通信的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue异步更新dom的实现浅析

    vue异步更新dom的实现浅析

    Vue中的数据更新是异步的,意味着我们在修改完Data之后并不能立刻获取修改后的DOM元素。本文介绍了vue异步更新dom的实现,感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论