一、代码

（1）使用Object.freeze()冻结不需要响应式变化的数据

原理：将configurable: 改为false，就不会被劫持了。

（2）防抖和节流

防抖：

  // 回调函数
    function searchName(name) {
      console.log('name=====', name)
    }
    
    // // 防抖函数 
    function debounce(func, delay) {
      let timer = null 
      return function(content) {
        if(timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          func(content)
        }, delay)
      }
    }
    let debounce1 = debounce(searchName, 1000)
    let input = document.getElementById("search")
    input.addEventListener('keyup',  function(e) {
      debounce1(e.target.value)
    })

节流

// 节流就是高频次触发，间隔相同的时间执行一次，技能冷却，
// 没有计时器就可以执行
// 一开始没有计时器， 可以执行一次，执行完开始计时 生成一个5秒计时器， 5秒后把他自己cleartimeout掉
function jieliu(fn, delay) {
  let timer;
  return function() {
    if(!timer) {
      fn(content);
      timer = setTimeout(()=>{
        clearTimeout(timer)
        timer = null
      },500)
    }
  }
    
}
   

（3）图片大小压缩&懒加载：
压缩：使用image-webpack-loader 进行压缩，
懒加载：引入第三方包vue-lazyload

// main.js引入
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1,
})

（3）按需引入饿了么ui
安装使用babel-plugin-component包，在.babellrc文件中设置libraryName：element-ui
(4)路由懒加载
使用import()方法进行组件的引入
(5) 虚拟列表：
vue3中使用的是 vue-virtual-scroller
(6)事件委托
(7) 图片上传压缩
(8)生产环境关闭sourcemap