前端性能优化1. ①打包-> ②一个js文件（文件过大）-> ③splitTrunk 分割js，按需引入 -> ④

js优化
图片优化压缩，懒加载
css 压缩，分割
网络请求接口优化，vuex三级缓存优化
渲染上 1像素webview

1.

①打包->

②一个js文件（文件过大）->

③splitTrunk 分割js，按需引入 ->

④路由懒加载

compontent: () => (import(/* Home: Home */ ‘./page/home’)) ->

⑤组件懒加载

import (/* webpackChunkName: "detail" */ "./page/detail/detail.js")

.then((res)=> { console.log(res) })

.catch(()=> {console.log("导入失败") }) ->

⑥点击卡顿

 <link rel="preload" as="script" href="index.js">

preload：马上执行，兼容性会好些

1）preload 加载的资源是在浏览器渲染机制之前进行处理的，并且不会阻塞 onload 事件； 2）preload 加载的 JS 脚本其加载和执行的过程是分离的，即 preload 会预加载相应的脚本代码，待到需要时自行调用；

prefetch：浏览器空闲时执行，兼容行不是很好

1) pretch 加载的资源可以获取非当前页面所需要的资源，并且将其放入缓存至少5分钟（无论资源是否可以缓存） 2) 当页面跳转时，未完成的 prefetch 请求不会被中断

2. tree shaking

只加载需要引入的函数tree shaking 消除无用js代码，减少代码体积

export 和 { } 搭配使用呢

3 首页白屏问题：

① vuex的三级缓存，以及1像素webview加载网页，网络问题和渲染问题

② 骨架屏

4. 图片优化

① 压缩/裁剪图片熊猫：tinypng.com/

① 图片懒加载 data-src=’url地址’图片出现在可视区后才去加载图片地址

② 图片懒加载 vue-lazyload插件， <img v-lazy=”url”:key=”img.src”>

5.防抖

重新计时，保证最后一次触发事件 n 秒后才执行

输入框搜索
表单提交按钮
文本器保存

function debounce(fn, wait) {
  let timer = null

  return function () {
    // 存在定时器 清空
    if (timer) {
      clearInterval(timer)
      timer = null
    }
    timer = setTimeout(() => {
        fn.apply(this, arguments)
      }, wait)
  }
}

6.节流函数在 n 秒内只执行一次

拖拽场景
scroll场景
窗口大小调整

function throttle(fn, wait) {
  let startTime = Date.now()

  return function () {
    const nowTime = Date.now()

    // 计算两次执行的间隔时间 是否大于 wait 时间
    if (nowTime - startTime >= wait) {
      startTime = nowTime
      return fn.apply(this, arguments)
    }
  }
}

7. Vue

合理使用watch和computed，数据变化就会执行，避免使用太多，减少不必要的开销
合理使用组件，提高代码可维护性的同事也会降低代码组件的耦合性
使用路由懒加载，在需要的时候才会进行加载，避免一次性加载太多路由，导致页面阻塞
使用Vuex缓存数据
合理使用v-if 、v-show
v-for中不要用index做key，要保证key的唯一性
使用异步组件，避免一次性加载太多组件
避免使用v-html，存在安全问风险和性能问题，可以使用v-text
使用keep-alive缓存组件，避免组件重复加载

前端性能优化

1.