vue项目中 vendor打包后过大解决办法

最新推荐文章于 2024-08-09 15:43:27 发布
最新推荐文章于 2024-08-09 15:43:27 发布
阅读量1.1w 收藏 3
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lee_NeiL_/article/details/81779811
版权

vendor打包过大的原因就是引用三方插件的js太大了 ，可以直接引用镜像解决问题

解决办法如下

1.在webpack.base.conf.js中新增配置项 表示webpack不需打包的文件 ，‘插件名’: '项目中别名'

2.在index.html中引入相应镜像文件

完成。

图一 没使用镜像引入

图二仅引入vue

图三引入element后

 

Lee_NeiL_
关注
使用vue打包时vendor文件过大或者是app.js文件很大的问题
12-09
第一次使用vue2.0开发，之前都是用的angular1.x。在使用vue-cli脚手架打包后（UI用的Element-ui），发现vendor文件很大，将近1M左右。。后来翻阅资料才明白，原来webpack把所有的库都打包到了一起，导致文件很大。 我的解决办法：   1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样： 然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代码 externals: { 'vue': 'Vue', 'vue-router': 'VueRouter',
Vue 打包 chunk-vendors.js 文件过大导致页面加载慢
cyyyeahey的博客
03-05 767
项目部署后移动打开加载缓慢，F12发现chunk-vendors.js加载时间过长。
vue 打包时候的分包
最新发布
pig_ning的博客
08-09 548
vue 打包时候的分包
前端优化、vendors过大、按需引入、加载时间太久、CDN加速
callMeOldWang的博客
05-03 4754
最近项目做完，到了令人激动的优化环节，也遇到了不少问题，现在呢，记录一下优化的过程。 首先呢，先要知道有哪些优化的方法？ 一、减少请求次数，看同一个页面有没有重复调用的接口 二、图片压缩，或者做成网图也可以减小包的体积 三、插件按需引入 四、CDN加速 。。。可以优化的方式有很多，这里我主要说下按需引入和CDN 首先项目做完后 在package-json中，在 build 指令 后面加上这个，指令...
vue[打包chunk-vendors.xxx.js文件过大，vue项目性能优化解决方案，前端性能优化知识总结]
热门推荐
墨水白云的博客
09-09 2万+
虽然看上去这个内容也就2M左右的大小，但是在线上却出现需要加载10几秒的时间，这对于一个项目来说是非常的有问题的。因此解决方式如下： 首先得知道为什么这个文件比较大，chunk-vendors.xxx.js是一个保存着各种相关依赖的关系的文件，比如导入的elmentUI、echarts、vue、vue-router等各种依赖 解决方案： 1.开启Gzip压缩 2.路由懒加载 3.检查图片等大小，看看能不能对加载的图片进行优化 // 使用webpack-bundle-analyzer检查打包加载的各种依赖大.
解决vue打包后vendor.js文件过大问题
10-16
主要介绍了解决vue打包后vendor.js文件过大问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
解决vue-cli脚手架打包后vendor文件过大的问题
10-17
在使用Vue CLI构建项目时，有时会遇到打包后的vendor文件体积过大的问题，这会导致页面初始化加载速度变慢，甚至出现明显的白屏现象。解决这个问题是优化前端性能的关键步骤之一，因为大型的vendor文件会增加用户...
vue打包时，chunk-vendors.js文件过大怎么优化
小强崽的博客
04-10 3987
使用工具分析代码，找出未使用的第三方库，并将其移除，从而减小。文件过大的优化方式，其中第三种方式是比较常用的方式。将一些重复引用的代码抽离成公共模块，避免代码冗余。将第三方库按需引入，避免将整个库都打包进。将一些体积较大且不经常更新的第三方库（如。等）使用 CDN 引入，这样可以减小。
uniapp 解决主包过大问题(vendor文件过大，使用了echart或其他类似的大型组件)，已解决
qq_63189148的博客
07-17 1521
可以看到有一个无依赖代码文件数，可以通过这个找到无用的依赖代码，下面的是我删除之后的，删除之前有一个1mb大小的无用依赖，然后还删除了一些无用的代码，零零散散减少了几十kbok，现在大小来到3mb，还是不符合需求。分页之前，我们需要明确，哪些页面应该合在一起，尽可能使，分包内的页面只在自己包内使用组件，减少主包的组件，这样能够减少主包大小，而且最重要的一点，可以看到分包效果十分显著，主要的内存就是由echart依赖导致的，因此以后我们开发的时候一定要注意分包问题，以及大型依赖放入同一分包下的重要性。
项目（Vue2）在打包时chunk-vendors.js文件过大问题
m0_45182947的博客
01-16 3606
Vue打包完毕后首屏加载过慢
Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
03-06 2330
Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
vue 打包时vendor太大
qq_39339339的博客
08-29 3008
打包的report 打包时出现这些module，查了一下都是webpack包所依赖的包，怎么缩小体积，目前是500k
vue项目优化——页面加载缓慢 chunk-vendors.js 文件过大
weixin_41844824的博客
09-13 2641
在开发项目时引入过多的插件时，容易导致项目打包后chunk-vendors.js文件过大，导致浏览器加载慢的问题。
解决Vue项目打包后文件过大问题
weixin_39964419的博客
10-11 1万+
首屏加载时间优化
【uview UI】uniapp发布成 微信小程序 主包内 main.wxss 体积太大 解决方法
AAAXiaoApple的博客
12-07 1079
【uview UI】uniapp发布成 微信小程序 主包内 main.wxss 体积太大 解决方法
uniapp微信小程序开发，如何解决打包太大无法预览发布的问题（uview）
SLife4599的博客
05-07 1万+
废话不多说，直接上解决方案。 我们经常用的解决方案有，分包，将图片上传到服务器上，减少插件引入。但是还有一个方案好多刚入门uniapp的人都给忽略了，就是在源码视图中配置，开启分包优化。 1.分包 目前微信小程序可以分8个包，每个包的最大存储是2M，也就是说你文件总体的大小不能超过16M，每个包的大小不能超过2M。下面是如何配置分包。 首先我们在和pages同级的位置创建新的文件夹，文件夹的名字随便命名，每分一个包就创建一个文件夹。如下图 然后在pages.json中配置分包路径 如下： { "pag
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值