vue首页加载空白或者过慢优化方法之gzip

最新推荐文章于 2023-05-14 14:03:43 发布
最新推荐文章于 2023-05-14 14:03:43 发布
阅读量212 收藏
点赞数
分类专栏： web 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dream_travelerly/article/details/128631815
版权

vue2版本配置

1.安装gzip版本（需要看自己vue得webpack版本，本人webpack版本3.6.0）

npm install compression-webpack-plugin@1.1.12

2 修改config下面index.js中配置，productionSourceMap参数修改为true

 3.修改build下面的webpack.dev.conf.js文件 把assets修改为filename

 4.配置nginx上的http

 

Dream_travelerly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue首屏白屏如何解决
youhebuke225的博客
05-30 1104
通过结合以上解决方案，可以有效地解决Vue首屏白屏问题，并提升用户体验。在实际开发中，应根据项目的具体情况和需求，选择合适的解决方案进行优化。二、文件引用和打包问题。三、浏览器兼容性问题。四、异步数据请求问题。
vue 首页加载缓慢、白屏现象的原因与解决办法
LSL3521的博客
03-31 8316
vue项目打包上线后，首次打开会发现加载很慢，出现白屏的问题， 一、问题原因 打开控制台查看文件加载情况，会发现app.js/vendor.js这两个文件加载时间较长 二、解决办法 1、图片压缩 使用webpack打包文件时，可以看到图片资源显示过大，使用工具进行压缩 2、去掉.map文件 webpack打包文件时，会看到有一些.map文件生成 修改： 找到config文件夹...
vue 首页加载缓慢、白屏现象
01-08
vue项目打包上线后，首次打开会发现加载很慢，出现白屏的问题， 一、问题原因 打开控制台查看文件加载情况，会发现app.js/vendor.js这两个文件加载时间较长 二、解决办法 1、图片压缩 使用webpack打包文件时，可以看到图片资源显示过大，使用工具进行压缩 2、去掉.map文件 webpack打包文件时，会看到有一些.map文件生成 修改： 找到config文件夹下的index.js文件，build里边的productionSourceMap值改为false即可 3、CDN外部加载 在项目开发中，会用到很多第三方库，如果可以按需引入，只需要引入自己需要的组件，减少所占空间，
vue项目首屏加载优化--gzip
L_csdn123的博客
08-30 341
vue项目首屏加载优化-gzip
Vue首屏加载过慢出现长时间白屏
qq_27824793的博客
11-25 1839
前言：本人第一次尝试写博客，如文章讲述不对的地方还望大家指出，多多包含，不胜感激！！ 需求场景：公司业务展示官网开发，构建版本后在外网测试环境下，发下首屏加载损耗高达几十秒（服务器在国外，所以也导致加载时间变长），于是采用了以下方法来达到提速目的。 问题攻克解决步骤如下： 1. 采用懒加载的方式（官网有所提及，这里就不做详细描述） 2. webpack开启gzip压缩文件传输模式： 　　- gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、
详解vue项目首页加载速度优化
08-29
详解 Vue 项目首页加载速度优化 在单页应用（SPA）项目中，特别是在移动端应用中，首页加载速度是一个绕不过去的话题。本文将介绍 Vue 项目首页加载速度优化的实践经验，并对相关的知识点进行总结。 知识点 1：第...
vue-cli项目优化方法- 缩短首屏加载时间
08-27
vue-cli 项目优化方法 —— 缩短首屏加载时间 Vue-cli 项目优化是指通过各种技术手段和优化方法来提高 Vue 项目的性能和加载速度，缩短首屏加载时间是其中一个重要的方面。以下是相关知识点的详细介绍： 一、使用 ...
详解Vue.js在页面加载时执行某个方法
10-17
接下来，我们将详细讨论如何在Vue.js中实现在页面加载时执行特定的方法。 首先，Vue实例的生命周期是指从创建到销毁的过程，它包含了一系列的钩子函数，这些函数在特定的时间点被调用，允许我们插入自定义逻辑。...
浅谈vue首屏加载优化
08-27
本文将从五个方面介绍 Vue 首屏加载优化的方法：按需加载、基于 DllPlugin 和 DllReferencePlugin 的 webpack 构建优化、异步组件、优化组件加载时机、webpack-bundle-analyzer。 一、按需加载 在使用 UI 框架时，...
Vue首屏加载过慢出现白屏的六种优化方案
09-19 1万+
公司业务展示官网开发，构建版本后在测试环境下，发下首屏加载损耗高达几十秒（服务器在国外，所以也导致加载时间变长），于是采用了以下方法来达到提速目的。
详解vue页面首次加载缓慢原因及解决方案
10-16
主要介绍了详解vue页面首次加载缓慢原因及解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决vue build打包之后首页白屏的问题
11-30
1、问题描述 本地的vue项目在server端浏览没问题，但是执行npm run build 打包之后在本地预览是白屏。有很多js,css无法加载。 2、解决方法 在config文件夹中找到index.js打开把assetsPublicPath: ‘/’改成下图方框中的样子。    再次执行 npm run build 就可以了。 以上这篇解决vue build打包之后首页白屏的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
优化vue 首屏加载过慢，减少白屏时间
sasha
06-23 879
1. 加速或减少HTTP请求损耗 使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等； 2. 延迟加载 非重要的库、非首屏图片延迟加载，SPA的组件懒加载等； 2. 减少请求内容的体积 开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等； 3. 浏
vue首页白屏的原因及如何优化
Delicia_Lani的博客
10-09 4558
一、原因： 单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏 二、解决办法： （1）优化 webpack 减少模块打包体积，code-split 按需加载 （2）服务端渲染，在服务端事先拼装好首页所需的 html （3）首页加 loading 或 骨架屏 （仅仅是优化体验） （4）缓存一...
如何优化vue项目首屏加载白屏(加载过慢)的问题
weixin_46391646的博客
05-12 2646
发现问题 昨天项目上线，访问线上地址整整加载了15秒，看了之后气的能砸电脑 在优化之后 首屏加载速度在1.2秒左右，当然还有优化空间，后期还可以考虑做个骨架屏，loading什么的提高用户体验 优化方案 优化之前下载webpack-bundle-analyzer webpack-bundle-analyzer 是 webpack的可视化资源分析工具 npm i webpack-bundle-analyzer 配置vue.config.js chainWebpack(config){ config.
vue 项目首页加载速度优化以及解决首页白屏问题
热门推荐
郝峰vip的博客
12-14 1万+
Vue项目优化首页加载速度达到秒开以及解决首页白屏问题
vue白屏或加载慢_Vue2 框架开发的单页程序页面首次加载慢的原因与优化方案
weixin_39551996的博客
12-19 552
在用Vue2 框架进行单页面开发时，开发完成后项目打包到线上环境，发现vendor脚本有963K，app.css文件也有四百多k，用户第一次打开网页加载这两个文件要十多秒，会使页面白屏十多秒，之后再次加载由于js和css有缓存，所以速度明显提升，但是初次加载时明显用户体验很差，该如何解决初次加载vendor.js和app.css慢的问题呢？是网速太慢的问题吗？按照道理来说，按现在的网速几百kb的脚...
Vue 项目中首页长时间白屏的原因及解决方法
最新发布
weixin_48723799的博客
05-14 6528
在 Vue 项目中，首页长时间白屏的问题会影响用户体验和搜索引擎优化。本文介绍了首页长时间白屏的。
vue首页加载tab页速度优化
03-08
对于vue首页加载tab页速度优化，可以采取以下措施： 1. 使用懒加载技术，只在需要的时候加载tab页内容，减少首次加载时间。 2. 对于大量数据的tab页，可以采用分页加载的方式，每次只加载一页数据，减少首次加载时间。 3. 对于静态资源，可以使用CDN加速，减少加载时间。 4. 对于代码优化，可以使用webpack进行代码分割，减少首次加载时间。 5. 对于网络请求，可以使用缓存技术，减少重复请求，提高加载速度。 希望以上建议能够对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值