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转es5 npm 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-...