vue项目首次加载时间很长（gzip篇）

最新推荐文章于 2024-05-17 16:06:33 发布
VIP文章 最新推荐文章于 2024-05-17 16:06:33 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端性能 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hong598hong/article/details/106816028
版权

一、使用场景

vue项目首次打开加载很慢，主要是打包后的三个文件加载很慢
在这里插入图片描述
我们把鼠标放到其中的一个文件上，查看加载的详细耗时，可以看到时间主要是花费在content download上了，这是我们就可以选择gzip优化
在这里插入图片描述

二、项目配置

在这里插入图片描述
webpack.prod.conf.js

webpackConfig.plugins.push(
    new CompressionWebpackPlugin
最低0.47元/天 解锁文章
天空的鱼儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目首屏打开速度慢的解决方法
10-17
主要介绍了vue项目首屏打开速度慢的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 启动项目时间很长？已解决
weixin_43839317的博客
05-19 4955
突然想起来，之前开发vue项目的时候，第一次以及后续每次更改完东西后，页面都需要加载，启动时间很长，需要两三分钟！！ 解决方案： 把config/index.js中的 useEslint 属性值改为 false 即可！！！ 亲测过，真的好用哦！ ...
vue首屏减少加载时间(gzip)
weixin_34137799的博客
04-25 67
最初,我以为单纯的以为通过按需引入相对应的组件和懒加载就可以有效的减少请求的时间 我to young啊，无论我怎么改，请求时间就是降不下来，后来，直到我遇到了本期的主角，gzip这个神奇的东西 原本我的请求体积是1M多（用了两个UI组件能不大吗（-_-）），用了懒加载和按需引入，虽然说降到600k 但是还是很大， 于是乎，在头疼的时候，我遇到了gzip OMG 体积变成了100多k！！！...
我是如何把vue项目启动时间从70s优化到7秒的
CRMEB小程序商城的博客
12-20 7069
可怕的启动时间 公司的产品是一个比较大的后台管理系统，而且使用的是webpack3的vue模板项目，单次项目启动时间达到了70s左右 启动个项目都够吃一碗豆腐脑了，可是没有豆腐脑怎么办，那就优化启动时间吧！ 考虑到升级webpack版本的风险还是比较大的，出了一点问题都得找我，想想还是先别冒险，稳妥为主，所以我选择了通过插件来优化构建时间。 通过查阅资料，提升webpack的构建时间有以下几个方向： 多进程处理文件，同一时间处理多个文件 预编译资源模块，比如把长时间不变的库提取出来做预编译，构建的时候直接
vue打包文件太大导致加载时间太久,开启gzip减少文件体积
bamboozjy的博客
11-30 999
vue-cli3或4脚手架搭建的项目 第一步:安装依赖: npm i compression-webpack-plugin -D 第二步:在vue.config.js中配置: const CompressionWebpackPlugin = require('compression-webpack-plugin') const isProduction = process.env.NODE_ENV === 'production' module.exports = { publicPath:
详解vue页面首次加载缓慢原因及解决方案
10-16
主要介绍了详解vue页面首次加载缓慢原因及解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-router路由懒加载的实现（解决vue项目首次加载慢）
12-11
在Web应用程序中，系统的瓶颈常在于系统的响应...像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loa
vue项目首屏加载时间优化实战
12-09
单页面应用的一个问题就是首页加载东西过多，加载时间过长。特别在移动端，单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化，希望大家能够相互讨论，共同进步。 我的项目 vue-cli3...
vue优化初次进入项目长时间加载白屏问题-添加首屏加载
Sylvasylva的博客
12-15 1365
vue优化初次进入项目长时间加载白屏问题-添加首屏加载
解决veu项目编译速度慢的问题
Lpd_Reason的博客
05-31 1228
主要在热更新这一块解决。 step1： 安装依赖 npm install babel-plugin-dynamic-import-node step2： 在webpack.prod.conf.js文件设置： new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, drop_debugger: true .
vue项目有几个接口content Download时间特别长的解决办法
孙叫兽的博客
05-10 8662
做的可视化地图项目，有几个接口加载比较慢，大概16S左右，第一次加载接近一分钟，这谁能受得了。 对比了正式环境和测试环境，这个接口数据量一样，就是在测试服务器比较慢，排除滚动插件及其它的影响。先注释请求后前端数据初始化逻辑，判断是后端接口问题还是组件渲染造成的。 最后定位到是域名解析造成的。把测试服务器的域名直接换成IP地址，省去解析的过程就好了，40ms加载完整个网页。 ok. ...
vue首次加载过慢的优化
by_side_with_sun的博客
08-11 355
1.取消map文件 去掉编译文件中map文件。在编译好后，我们会看到文件夹下有特别多的.map文件，这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不生成这些文件。 在config/index.js文件中将productionSourceMap的值设置为false. 再次打包就可以看到项目文件中已经没有map文件 2.路由懒加载 之前是先导入，通过import 这次加入懒加载，懒加载就不要事先导入了 3.使用cdn，将vue的导入包全部设置为cdn，可...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 671
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 352
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
最新发布
xingyu_qie的专栏
05-17 836
基于Vue3 + js-tool-big-box的3个随机数字
Vue项目首次加载很满，如何优化
09-07
对于Vue项目首次加载很慢的问题，可以考虑以下几种优化方式： 1. 使用CDN加速：将静态资源（如JS、CSS、图片等）放在CDN上，可以加速资源的加载速度，减轻服务器的负担。 2. 代码分割：将代码分割成多个小模块，按...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值