zxo_apple的博客

之前使用react + webpack模式开发时，项目结构多了之后，每次本地开发启动项目时，毫不夸张的说，大约都要30s左右，所以决定将webpack改为vite， vite的优势查看vue项目迁移为vite第一步搭建react + vite项目目录结构npm init vite@latest my-react-app -- --template react将原有react项目中package.json所用到的安装包，复制到vite搭建的项目中（下面简称vite），并复制src到vite中复制完

dist打包后经常遇到包过大，有的甚至超过10M等，这会导致我们项目在首次进入时，由于资源加载过多而导致页面白屏的情况，针对这种情况，我们可以对以下几个方便进行优化一、设置productionSourceMap在vue.config.js文件中，设置productionSourceMap为 false；表示生产环境不生成sorce map文件（source map 就是资源地图。其作用就是定位，用于定位浏览器控制台输出语句在项目文件的位置，以便于出现问题时快速找到问题位置。）module.export

问题描述：微信公众号通过链接打开vue页面遇到白屏问题，通过排查，发现是某些微信浏览器版本过低导致，而此时项目中使用到了es6，es7等语法，导致浏览器无法解析解决方法：// 1.安装bebel进行es6转es5npm install babel-preset-es2015同时在根目录下添加.babelrc文件，配置如下{ "presets": [["@babel/preset-env", { "modules": false }]], "plugins": []}此时可能会报错

节流就是为了防止用户在某段时间内频繁的触发多次请求，而只会去执行第一次请求，例如滚动事件我们可以把节流比喻成：一个公交车司机和乘客以及时间的关系比如公交车司机在客运站等待乘客的到来，当第一个乘客来了之后会告诉乘客车10分钟后才发车，在此期间会继续等待其他乘客的到来，当10分钟到了之后，无论还有没有乘客，司机都会发动汽车离开，这就是节约资源（节流）以窗口滚动事件为例：timer:看成公交...

图片懒加载为了优化网页性能，减少网络资源的浪费，我们经常会在有大量静态资源图片时，进行图片懒加载，接下来看看具体操作吧1.先把所有图片的路径写入data-src中（此时页面不会显示图片）2.可以设置一些css动画特效3.监听外部div的scroll滚动事件，当图片进入可视区域(imgTop - boxTop <= box.clientHeight)时，设置图片的src为data-...