vendor.js过大，导致首次加载白屏时间很长

最新推荐文章于 2024-09-03 10:43:39 发布
最新推荐文章于 2024-09-03 10:43:39 发布
阅读量1k 收藏
点赞数
分类专栏： Vue 不懂就问系列 项目优化 文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Admin_yws/article/details/120135177
版权

原因分析：由于vendor体积较大，下载时间长，造成首屏加载缓慢

可以从以下方面减少整个包的体积：
1.npm install --save-dev compression-webpack-plugin，开启gzip压缩
2.productionSourceMap 设置为false
3.在index.html界面CDN引入
4.vue-router 路由懒加载

友情链接：可以看下这篇文章 https://www.jianshu.com/p/c4a9a0d4db95

新津之虎--曹达华
关注
专栏目录
记一次react项目部署之后页面加载极度缓慢的问题
看开了
08-16 9287
加载太慢了 21.11s我是真的吐了,紧接着刷新,就会立即加载 然后Firefox看了一下是js的问题,我太难了 我太难了 这么点东西加载都这么慢 然后为script标签加个async属性,让他有异步加载,加载完之后执行 但是async因为是乱序异步的,所以会导致不按顺序执行js, 所以建议使用defer,虽然是依旧是异步加载,但是会按先后顺序执行 我真是太难了, 我发现最大的问题不在于加载...
【vue】优化白屏即首次加载时间,针对vue2+webpack
宅即万物
11-17 733
在对应的webpack配置文件(webpack.base.conf.js)的module.exports 中的externals添加要忽略的包。此处有chunks与excludeChunks需要注意，chunks如果配置了，路由懒加载将会失效，所以不宜配置chunks。注意：不同包要修改的方式不同，需要研究后再修改，例如vant，vue.use(vant.button)等。至此，原本需要7-8秒才可以加载出来的页面，只需要0-1秒就可以加载出来（此次研究断断续续有两周的时间）将js中的css文件分离出来。
JEECG 页面访问慢，优化方案
曾今拼命的想，现在却拼命的忘
02-12 6150
1. 静态资源压缩 GZIP是网站压缩加速的一种技术，对于开启后可以加快我们网站的打开速度，原理是经过服务器压缩，客户端浏览器快速解压的原理，可以大大减少了网站的流量。 通过资源压缩拦截器，减少带宽访问 2. 静态资源缓存 3. easyui 页面优化    http://www.easyui.info/archives/1435.html    http://www.36
chunk-vendors.js 文件过大导致页面加载缓慢解决方案
最新发布
weixin_53545517的博客
09-03 1093
【代码】chunk-vendors.js 文件过大导致页面加载缓慢解决方案。
jeecg-boot 前端加载优化版 解决加载慢
魔道晓树的专栏
06-11 5217
jeecg-boot 前端加载优化版 解决加载慢
jeecgboot-vue3首次加载时间优化
清晰编程
12-15 2302
jeecg3.6首次加载时间比较长，有时需要十来秒，体验挺不好，需要优化一下。 加载时间长的原因是加载的资源比较大，开发环境下有30多M，生成环境下也有15M左右。这么大的依赖包，加载起来肯定会慢。知道了为什么加载慢了，优化方法也就有了，那就是去掉不需要的依赖。
jeecg-boot首页加载速度优化全过程
weixin_54218079的博客
10-18 9362
load时间从二十多秒降至三四秒，来看看都经历了啥吧
vue首次加载很慢、vendor文件过大的优化方式
weixin_44668908的博客
10-19 1540
最近开发一套后台管理系统，遇到首页加载很慢的问题，技术栈是 vue全家桶 + elementUI + echarts 。首次加载大概需要10s，页面才能出来。 总结如下原因： 原因1：由于vendor.js和app.css较大，UI渲染线程并不会优先加载他俩，但是VUE等主流的单页面框架都是js渲染html body的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。 原因2：还有一个原因就是单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载 二者相加
vue 首页加载缓慢、白屏现象的原因与解决办法
LSL3521的博客
03-31 8455
vue项目打包上线后，首次打开会发现加载很慢，出现白屏的问题， 一、问题原因 打开控制台查看文件加载情况，会发现app.js/vendor.js这两个文件加载时间较长 二、解决办法 1、图片压缩 使用webpack打包文件时，可以看到图片资源显示过大，使用工具进行压缩 2、去掉.map文件 webpack打包文件时，会看到有一些.map文件生成 修改： 找到config文件夹...
vue白屏或加载慢_Vue首屏加载慢的优化方案
weixin_39996234的博客
12-19 1312
使用vue构建项目首屏加载时，出现加载慢，白屏的问题解决方案：步骤一 webpack来打包vue项目，vendor.js过大问题解决1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用了一些第三方库。导致了你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下...
vue项目优化——页面加载缓慢 chunk-vendors.js 文件过大
weixin_41844824的博客
09-13 2761
在开发项目时引入过多的插件时，容易导致项目打包后chunk-vendors.js文件过大，导致浏览器加载慢的问题。
Tomcat启动gzip压缩来解决vendor.js过大页面加载慢的问题
zhuimenghou的博客
06-21 731
Tomcat启动gzip压缩来解决vendor.js过大页面加载慢的问题
前端优化、vendors过大、按需引入、加载时间太久、CDN加速
callMeOldWang的博客
05-03 4936
最近项目做完，到了令人激动的优化环节，也遇到了不少问题，现在呢，记录一下优化的过程。 首先呢，先要知道有哪些优化的方法？ 一、减少请求次数，看同一个页面有没有重复调用的接口 二、图片压缩，或者做成网图也可以减小包的体积 三、插件按需引入 四、CDN加速 。。。可以优化的方式有很多，这里我主要说下按需引入和CDN 首先项目做完后 在package-json中，在 build 指令 后面加上这个，指令...
umi首屏加载速度优化
weixin_46030044的博客
06-21 3220
以上内容来源于转载 作者：pro-xiaoy 链接：https://juejin.cn/post/6964352706832302117 来源：稀土掘金 umi应用首屏加载速度提高3倍+（通用的首屏优化方法） 根据以往的博客,目前我就司的公司前端框架umi, ali出品以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展的前端应用框架。 问题所在 一直以来我们网站的首页加载速度很慢,虽然使用了umi但是我们没有使用ssr依旧使用的是spa.首屏加载速度在6s左右, 当我们
Vue 项目打包以后 vendor.js 体积太大，影响首次加载速度
热门推荐
LonewoIf的博客
02-20 1万+
在 Vue 项目中，引入到工程中的所有 js、css 文件，编译时都会被打包进 vendor.js，若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方案：将引用的外部 js、css 文件剥离出来，不编译到 vendor.js 中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将 vendor.js、外部的 js 等加载下来，达到首次打开加速的目的。 推荐外...
vendor.js? [sm]:190 [Vue warn]: Error in render: “TypeError: Cannot read property ‘replace‘ of undef
时漂亮的博客
04-20 655
解决方法： 后端返回的数据肯能是null
vue项目打包后因vendor文件过大首次加载很慢的优化方法
jiangwei1994的博客
05-13 2734
1.打开/config/index.js文件 将productionGzip设置为true productionGzip: true, 然后用npm安装依赖，命令如下： npm install --save-dev compression-webpack-plugin@1.1.12 2.打开/build/webpack.base.config.js文件 找到module.exports的module中的rules，将limit设置为1000（默认为10000），如下图： 3.服务器端配
vendor.js太大
05-24
"vendor.js" 是指在前端开发中用于打包第三方库或框架的文件。如果这个文件太大，可能会对网页加载速度产生负面影响。 有几种方法可以减小 "vendor.js" 文件大小： 1. 只导入需要的模块：只导入你的项目中需要使用的库或框架，而不是将整个库或框架全部导入。 2. 代码优化：优化代码结构，删除冗余代码，压缩代码等。 3. 使用 CDN：使用 CDN 来加载第三方库或框架，这样可以减小文件大小并提高加载速度。 4. 按需加载：将第三方库或框架的部分代码按需加载，而不是一次性加载全部代码。 5. 代码分割：将第三方库或框架的代码分割成多个文件，只加载需要的部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值