当前位置: 首页 > news >正文

vue打包上传到服务器加载慢的优化

项目打包后加载时间及大小

1.下图为vender.js加载时间,会发现vebder.js 大小将近250k,加载时间蓝条很长

解决方式

我同时用了两种解决方式,来减少vender.js的大小

1.路由懒加载

vue-router路由懒加载(解决vue项目首次加载慢)也叫延迟加载,即在需要的时候进行加载,随用随载。简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!

像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

解决方式

在路由设置文件router.js 文件中将import 改成require
原有文件

2.将外部资源通过CDN引入,仅针对vue3.0  必须在div.app上面

步骤2:在vue.config.js 中进行配置
这里要注意vue3.0 是没有这个文件的,
1.所以我们需要在根目录手动创建vue.config.js文件。
2.在configureWebpack:中通过externals进行配置,格式为‘XXX’:‘SSS’ 这里 XXX 为引入资源的名称,’SSS‘表示模块提供给外部引用的名称。 这里要注意’SSS‘ 是固定格式 不可自定义 ,否则报错 SSS:undefined…
4.配置完毕以后,一定要先重新run 项目, 否则会报错,因为vue.config.js并非实时加载。
 
 configureWebpack : {
        externals: {
            'vue':'Vue',
            'vue-router':'VueRouter',
            'axios':'axios',
            'element-ui':'ELEMENT',
        },

切记去掉import

使用的时候可以按需引入

最后当然还有服务器nginx的压缩

 

 

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • nginx部署多个 vue项目
  • 转载--中国手机游戏市场焦点分析报告
  • 角色扮演游戏引擎的设计原理--转自MOVE2008
  • flutter指纹识别
  • CC++中,typedef与#define
  • node搭建直播服务器流
  • flutter使用dio上传图片到阿里云Oss存储
  • sizeof终极无惑
  • uniapp图片上传
  • 电子游戏发展史话——《doom启示录》读后感(三)
  • $GOPATH/go.mod exists but should not goland
  • const用法小结(原创)
  • uniapp上传图片和视频到OSS
  • 华为一道排序题
  • fiber框架token校验
  • [PHP内核探索]PHP中的哈希表
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • Fabric架构演变之路
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • Python_网络编程
  • Sass 快速入门教程
  • Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
  • 前端自动化解决方案
  • 入门级的git使用指北
  • 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?
  • 线上 python http server profile 实践
  • 用Canvas画一棵二叉树
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​Redis 实现计数器和限速器的
  • !!【OpenCV学习】计算两幅图像的重叠区域
  • # Java NIO(一)FileChannel
  • ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException
  • (1)常见O(n^2)排序算法解析
  • (14)目标检测_SSD训练代码基于pytorch搭建代码
  • (4)通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
  • (SERIES10)DM逻辑备份还原
  • (vue)页面文件上传获取:action地址
  • (笔试题)分解质因式
  • (带教程)商业版SEO关键词按天计费系统:关键词排名优化、代理服务、手机自适应及搭建教程
  • (十八)SpringBoot之发送QQ邮件
  • (转) Face-Resources
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • .Net Core 中间件验签
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • .net反混淆脱壳工具de4dot的使用
  • .net企业级架构实战之7——Spring.net整合Asp.net mvc
  • .net专家(高海东的专栏)
  • [ A*实现 ] C++,矩阵地图
  • [2016.7.test1] T2 偷天换日 [codevs 1163 访问艺术馆(类似)]
  • [20171113]修改表结构删除列相关问题4.txt
  • [2018-01-08] Python强化周的第一天
  • [AIGC] 解题神器:Python中常用的高级数据结构
  • [Android] Upload package to device fails #2720