解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题

打包项目过程中遇到警告 (想看结果,可以滑至底部)

输出文件名字/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.

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

如何进行配置分割

根据提示进入到rollup.js

打开后你会看到一堆英文,还有两个小小的代码块

  manualChunks: {
      lodash: ['lodash']
  }

  manualChunks(id) {
      if (id.includes('node_modules')) {
          return 'vendor';
      }
  }

你可以看到 output.manualChunks 这个应该是放在rollup打包配置里面的

module.exports = {
  build: {
    rollupOptions: {
        output:{
            manualChunks: {
                lodash: ['lodash']
            }
        }
    }
  }
}

再次运行打包你会发现 在你打包结果的中会有多了一个lodash,但是少了之前的vendor的大文件,其他的文件又变大了

输出文件名字/static/lodash.fe9934f4.js 0.23kb / brotli: 0.12kb

然后你在换个另外一个返回 return "vendor" 好像除了变大了其他的没什么变化,换个返回值试试

module.exports = {
  build: {
    rollupOptions: {
        output:{
            manualChunks(id) {
              if (id.includes('node_modules')) {
                  return "wq";
              }
          }
        }
    }
  }
}

打包的结果如下,发现好像多了一个css,大小没有是什么改变,还变大了

打印一下这个id看看是什么玩意,猜测应该是一些依赖包,因为是看有没有node_modules

  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (id.includes('node_modules')) {
                    console.log(id,"======")
                    return "wq";
                }
            }
          }
      }
    }
  }

发现都是一些依赖包,既然是可以打印那我是不是可以返回对于的包的名字,开干

/node_modules/element-plus/lib/index.esm.js

我们直接以"node_modules/"进行分割 取第二个

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

然后在以"/"进行切割取第一个 console.log("值为",id.toString().split('node_modules/')[1].split('/')[0].toString())

最好我们就以分割的值为返回的值就可以了 就不会报警告包体积太大了,而且他会把重复的放在同一个名字下不会有重复

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

重点在最后:这个文件太大其实不是这样去处理,这是只是视觉上的减小,其实他只不过是把大文件拆开来分成很多分了而已, 没什么实质性的作用,只是当时我在使用时遇到情况,才去进行处理,如果大佬想要知道怎么处理,可以看一下这篇文章 点击这里,这是我一位大佬进行交流把文件进行压缩的方法,使得网站访问速度大大提高

补充:会生成大量1kb的文件,反而文件数量多了不少,如何将所有小文件打包一起?

在之前把文件拆分虽然体积减小了但是文件数量增多了,既然rollup可以把文件整合,我们把文件拆分,那么我们就可以把单独体积大的文件拿出来,其余的文件整合,这样就可以把那些很小的文件和一起,由于我目前没有找到可以获取每个包文件的大小,只能通过先拆分打包后可以看到具体哪几个包体积大,然后把这几个包单独拿出来处理;当然这样的方法肯定不行,我只提供思路,如果哪位大佬知道如果获取文件的大小,可以评论告诉我,谢谢大佬门了

 manualChunks(id) {
                    if (id.includes('node_modules')) {
                        //我这里用到其他包不多,最大的就是element-plus我把它单独拿出来,其余的都返回随便一个名字,
                        // 和之前没有配置相比,文件就只会多了element-plus和一个wq的js
                        if(id.toString().split('node_modules/')[1].split('/')[0].includes('element-plus')){
                            return 'element-plus'
                        }else{
                            return 'wq'
                        }
                        // return id.toString().split('node_modules/')[1].split('/')[0].toString();
                    }
                }

到此这篇关于解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题的文章就介绍到这了,更多相关vite1.0升级到2.0内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • vite2.x实现按需加载ant-design-vue@next组件的方法

    1.使用版本 vite:2.0 ant-design-vue: 2.0.0-rc.8 vue:3.0.5 2.安装vite插件 yarn add vite-plugin-style-import -D or npm i vite-plugin-style-import -D 插件仓库地址:github 3.vite.config.js配置 import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style

  • 基于Vite2.x的Vue 3.x项目的搭建实现

    创建 Vue 3.x 项目 npm init @vitejs/app my-vue-app --template 引入 Router 4.x npm install vue-router@4 --save 配置路由 在更目录中添加一个 router 的文件夹,新建 index.js Router 4.x 为我们提供了 createRouter 代替了 Router 3.x 中的 new VueRouter,用于创建路由. // Router 4.x import { createRouter,

  • vite2.0 踩坑实录

    目录 vite项目构建优化 其它 最后 算是对上一篇的补充,记录了一些在配置项目中遇到的问题,希望对大家能有所帮助- vite项目构建优化 路由动态导入 经过rollup的构建,动态导入的文件将会生成异步的chunk文件,在我们访问项目的时候按需加载,极大的提升应用的加载速度 import Home from '@/views/home/index.vue' import Layout from '@/components/Layout.vue' const routes: Array<Rout

  • 利用Vite2和Vue3实现网站国际化的全过程

    目录 前言 安装vue-i18n 配置Locales 实现 getLangs.js 创建 i18n 实例 模板中使用 语言切换 关于切换后需要刷新后才生效 切换语言触发其他组件更新 总结 前言 最近有人在吐槽项目使用 Vue3 之后,出现一堆问题,填坑困难,甚至是开发中才发现某些第三方库没有推出 Vue3 的版本,因此大发吐槽,强烈建议不使用 Vue3. 做好技术预研和兼容性调查是开发前的工作之一,特别是对于新技术或者大版本的更新,除非你有十个胆,否则不要在预研不充分的情况下,在正式项目中使用.

  • vue3.0+vite2实现动态异步组件懒加载

    创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g

  • 详解vite2.0配置学习(typescript版本)

    介绍 尤于溪的原话. vite与 Vue CLI 类似,vite 也是一个提供基本项目脚手架和开发服务器的构建工具. vite基于浏览器原生ES imports的开发服务器.跳过打包这个概念,服务端按需编译返回. vite速度比webpack快10+倍,支持热跟新, 但是出于处于测试阶段. 配置文件也支持热跟新!!! 创建 执行npm init @vitejs/app ,我这里选择的是vue-ts 版本 "vite": "^2.0.0-beta.48" alias别

  • 解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题

    打包项目过程中遇到警告 (想看结果,可以滑至底部) 输出文件名字/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.ma

  • 从IIS6.0升级到IIS7.0日期格式调整方法整理

    将系统从IIS6.0平台升级导IIS7时(.netframework2.0 到4.0)操作系统WINSERVER2008时,有可能会遇到系统原本显示的日期格式被转化的问题 本人就遇到原本系统的日期格式是(yyyy-M-d) 结果平台升级后变成了(yyyy/M/d) 一下是从网上获取的解决方案,在此转载,以便记忆: ---------------- Win2008 IIS7日期格式更改方法 . 服务器从32位升级到64位的WIN2008,结果就出日期格式问题,首先想到的当然是到控制面板里面更改区域

  • android studio 3.0 升级 项目遇到的问题及更改思路(问题小结)

    Android Studio从3.0版本新增了许多功能,当然首当其冲就是从3.0版本新增了对 Kotlin 开发语言的支持,除此之外还有其他一些新功能,例如:Android Profiler (其中包含了: CPU Profiler.Memory Profiler.Network Profiler ),APK Debugger,Device File Explorer,Java 8 Language Features等. android studio 3.0版本升级问题修改: ===> 问题一

  • Android Studio 升级到3.0 提示 java.lang.NoClassDefFoundError的解决方法

    解决方法 首先把方法写出来,起因和经过和原理写在后面,时间仓促的直接看解决方法吧. 一般出现这个错都是使用的provided导致的 例如,我的旧配置如下: Project build.gradle文件: buildscript { dependencies { classpath 'com.android.tools.build:gradle:3.0.1' // need delete in gradle3.x version classpath 'com.neenbedankt.gradle.

  • Android Studio3.0升级后使用注意事项及解决方法

    Gradle plugin最高版本4.* 老的项目在使用新版本时,可能会出现gradle plugin冲突的问题 Error:Failed to open zip file. Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.) Re-download dependencies and sync project (requires network)

  • 解决java maven项目找不到jconsole-1.8.0.jar和tools-1.8.0.jar包问题

    今天遇到了这样一种情况,自己的maven项目中并没有引用的jar包出现在了Maven Dependencies的依赖包中.而我在pom.xml自己没有没有引入啊. 图示 怀疑是自己的alibaba 的druid所依赖的包: <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.0.14</version>

  • Asp.NetCore3.1开源项目升级为.Net6.0的方法实现

    目录 概述 需求 目前解决方案 总结 概述 自从.Net6.0出来后,一直想之前开发的项目升级.Net6.0,有时想想毕竟中间还跨了个5.0版本,升级起来不知道坑大不大,最近抽时间对升级的方案做了些研究,然后将代码升级为.Net6.0.本质上来说我个人不太喜欢.Net6.0去掉main方法和startup,微软这么干让初学者学习的门槛其实是更高了,但阻挡不住我喜欢.Net6.0项目的发布包体积确实小等!来,开干吧! 首先我们看下asp.netcore3.1的program代码: public c

  • 浅析Android Studio 3.0 升级各种坑(推荐)

    点击 Check for Updates 增量更新: 下载完成,会提示更新 您将 Gradle 更新至 4.1: 这里建议您对老项目先暂时点击 Don't remind me on this project,以防有坑.当然我不入地狱谁入地狱,我点 Update,于是问题来了,一直处于下载中,不过,莫担心,我下载好了,公众号聊天界面回复「 gradle-4.1-all 」,下载 gradle-4.1-all.zip 文件,放到: 重启 Android Studio. gradle 目录: Mac系

  • Android Studio升级到3.0后遇到的坑

    这几天谷歌推出了as3.0的正式版,相信大家都进行更新了,然后对3.0的新特性也有过一些了解,最后磨刀霍霍开始宰杀,然鹅却一不小心就开始了排坑之路. 第一坑.必须升级gradle到4.0以上 相信这个大坑,一般使用as的人都会解决了,所以就不多说 第二坑.buildToolsVersion升级到26.0.0 其实这个不算坑,一般buildToolsVersion都会升级到最新的版本,直接更新就是了 第三坑.Error:Resource shrinker cannot be used for li

  • gradle tool升级到3.0注意事项小结

    Gradle版本升级 其实当AS升级到3.0之后,Gradle Plugin和Gradle不升级也是可以继续使用的,但很多新的特性如:Java8支持.新的依赖匹配机制.AAPT2等新功能都无法正常使用. Gradle Plugin升级到3.0.0及以上,修改project/build.gradle文件: 修改global.gradle(自定义lib管理的gradle) tools = [ gradleTools : 'com.android.tools.build:gradle:3.0.1' ]

随机推荐