vue项目首屏加载过久处理笔记
1、启用gz 配置: 服务器开启gzip
会生成 gz 文件,现代浏览器基本都支持,会读取gz文件,。
开启配置:https://blog.csdn.net/baidu_35407267/article/details/77141871
2、解决依赖项的大小
npm run build --report 查看依赖内容,分析、优化
a、moment 过大,使用 date-fns代替
npm install date-fns --save
https://blog.csdn.net/fsxxzq521/article/details/85715213
b、vue核心包 使用运行时版本,vue.runtime.esm.js。节约 将近100k。
限制在于 只能用render来 运行时 生成,不能使用template 。开发不便。
https://cn.vuejs.org/v2/guide/installation.html#
c、zyby-ui组件,过大,有这样一个问题:一些组件依赖了vue,
?为什么mintui 导入了 但是没有加载vue呢。
答:打包时 使用了externals 配置选项
externals 名叫外部扩展,里面定义的东西 如果跟 import 的 from 同名时 打包时 不会打进去,而是在运行时 再去外部获取。
注意: externals 里的键名 跟 import from 的内容相同,而键名对应的值 为 真实 外部变量。externals相对于一个中转的作用,打包时 告诉webpack,遇到 from 内容 和 externals 键名相同时,是运行时从外部获取。
另,如mintui 的配置,如果 用到了按需加载,记得配置时 应按照 babel 转换后的语法去操作。
正确解决:去掉vue,mintui 用到的组件,互相依赖的自制组件,dependencies
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
小插曲:直接写出 vue: 'Vue';结果 外部项目 多依赖了 一个 vue.runtime.esm.js 。
3、代码内去掉 console
生产模式下去掉
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
4、cdn 有条件上呗
转载于:https://www.cnblogs.com/fan-zha/p/11014386.html
vue项目首屏加载过久处理笔记相关推荐
- vue项目首屏加载优化
1.将第三方资源使用cdn引入 将项目中用到的一些第三方库通过cdn的方式引入的话,在打包的时候就不需要对第三方库进行打包,自然就减小了包的大小,首屏加载的时候所加载的内容也就减少了,加载时间就少了. ...
- vue项目首屏加载慢解决方案
项目场景: 近期项目打包上线后,首屏加载速度太慢.记录一下优化的步骤; 解决方案: 一.开启Nginx压缩 参考知乎文章 vue-cli3项目开启gzip压缩 - 知乎 下图已经是 开启了 Nginx ...
- vue项目首屏加载过慢解决方案
前言 因为我的一个vue项目首页打开加载了好久,所以决定优化一下.发现是打包体积太大了,页面才加载慢主要是第三方库. 优化着优化着就想要更好一点,于是逛博客搜索,参照了几个博主的解决方法整理出一下几点 ...
- [vue] SPA首屏加载速度慢的怎么解决?
[vue] SPA首屏加载速度慢的怎么解决? 1.通过Gzip压缩 2.使用路由懒加载 3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小 ...
- 记前端项目首屏加载优化(网络篇)
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面 资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
- Vue:首屏加载页实现
众所周知vue项目通常首屏加载会非常慢,在浏览器加载资源时,可以在首屏加入一个loading页面. 首先找到在根目录下的 /pulic/index.html: 在 index.html 中找到我们的i ...
- Vue - 网站首屏加载等待动画(极简解决方案)
效果图 前言 解决白屏等待方案非常多,个人而言评判好坏的标准即 用最少最简单的代码实现相同的功能. 在 Vue 项目中,网站加载时会显示自定义动画(CSS),当文件加载完毕且页面显示时自动移除动画. ...
- vue实现首屏加载等待动画 避免首次加载白屏尴尬
为什么80%的码农都做不了架构师?>>> 0 直接上效果图 1背景,用户体验良好一直是个重要的问题. 2怎么加到自己项目里面? 复制css html代码到自己的index.ht ...
- VUE 首屏加载时间优化
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
最新文章
- Xamarin XAML语言教程XAML文件结构与解析XAML
- 谷歌大脑提出“洗发水”二阶优化算法,Transformer训练时间减少40%,Jeff Dean点赞...
- 1.IDA-基本操作(改变Image Base地址、打开、保存IDA的不同方式)
- BootStrap的入门和响应式的使用
- 【Spring】Spring事务失效的 8 大原因
- mysql5.6安装配置教程_Centos6.8 Mysql5.6 安装配置教程
- DockerDesktop安装以后,控制台输入docker version报错This error may indicate that the docker daemon is not running
- 谈谈目前我对区块链(Blockchain)的认识
- AI圣经!《深度学习》中文版隆重上市!美国亚马逊AI领域排名第一畅销书!
- TLSF: Memory allocator real time embedded systems
- java导出地图矢量Shp文件
- CentOS7--安装谷歌浏览器--详细步骤
- z变换判断稳定性和因果性_试题库 - 7:z变换 -
- 菩萨蛮 生如夏花(赵敏)
- 笑话段子手微信小程序源码自带内容采集随时有新内容
- 项目经验不丰富、技术不突出的程序员怎么打动面试官?
- 深造分布式 打败面试官 招式三 直捣黄龙
- Flask外部访问服务器最简单的操作
- 防止刷新页面造成表单重复提交
- 计算机图形学直线裁剪原理,计算机图形学-3.2用Liang-Barsky算法实现直线段裁剪...
热门文章
- Element-UI 要怎么学?官方文档!
- 软件测试学习指南(更新中)
- 软件设计师11-数据库
- mysql 源码设计,java+mysql大学网络社区平台设计+源代码
- python里的英文歌叫什么_一首英文歌名最后是onshould
- Vue父组件监听子组件调用删除模块(个性化页面设置会使用到)
- python通过get方法获取key对应的值
- linux清除asm磁盘分区,ASM Diskgroup添加与删除
- matlab在循环中保存jpg格式_Matlab如何循环读取文件
- 计算机无法安装应用,编程软件无法安装或报错