云之彼端的博客

最近入职了新公司，接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化，把经验分享出来，注意本分享只针对打包大小上做的优化。打包分析vue cli已经集成了打包分析可直接使用，在package.json中script中加入"report": "vue-cli-service build --report"，执行npm run report打包会生成report.html文件，直接在浏览器打开可查看各个包的大小，对其进行针对性分析，优化。如下图。打包优化1.减少无用库的引用因为该vue项目是

正所谓纸上得来终觉浅，绝知此事要躬行。我们看了vue的响应式实现源码，大致了解了vue的实现思路，那这一节我们就参考vue的实现写一个简易版的vue，我们命名为Lue。上一节我们说过vue响应式原理的核心实现是三个部分，分别是Observer，Dep和Watcher。那下面我就针对这三个部分分别做一个简单的实现。Observer对传入的数据进行数据劫持。这里只简单考虑是对象的场景，对数组等复杂...

观察者模式观察者模式（又被称为发布-订阅（Publish/Subscribe）模式，属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。vue的响应式原理采用的就是观察者设计模式。下面是观察者模式在vue中的运用解析。图片来源：https://blog.youkuaiyun.com/g...

引言对于vue如何实现双向数据绑定的原理，现在大部分同学都能快速说出是利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应，vue3.0利用的是Proxy。好像似是而非懂了，但问到是如何劫持，如何响应的又懵懵懂懂说不出所以然。希望通过我的分享能帮助大家更加深刻的理解vue的实现原理，更好的在工作中运用好vue。本次分享的内...

为什么要使用骨架屏在针对SPA应用进行首屏优化的时候，我们是尽可能地减少白屏时间，使首屏内容尽早的展现出来，可因为SPA应用的特性用JS绘制dom，在js未加载完成时dom不会被绘制出来，所以虽然白屏时间可以通过减少http请求，压缩请求体积，懒加载等各种方法来缩短，但根本上是无法清除的。短暂的白屏会被用户不好的体验，常用的做法可以在内容未加载出来前添加一个loading的动画，今天介绍的骨架屏...