网页性能优化

优化api

优化api 时在api / index.js 中用这种引入方法导入所有分文件api的按需导入, 在按需导出

export * from '@/api/ArticleList'

导入该路径文件中所有按需导出的方法,在全部按需导出

优化本地存储

原因: localStorage用的好好的,散落在各个逻辑页面里隐患,要变成sessionstorage,那又得挨个地方找
解决: 在工具包内封装一个本地存储js文件内容如下

• 在utils文件夹下创建storage.js 文件
• 粘贴如下代码
• 在使用页面引入
• 使用时直接storage.getItem('参数')

//需要引入使用的文件
import storage from '@/utils/storage'

// Storage.js 
const obj = {
  setItem (key, value) {
  return  localStorage.setItem(key, value)
  },
  getItem (key) {
  return localStorage.getItem(key)
  },
  removeItem (key) {
  return  localStorage.removeItem(key)
  },
  clear () {
  return  localStorage.clear()
  }
}
export default obj

VUE路由懒加载

原因:路由页面会import全部引入,不管看不看某个页面,都会引入过来打包,导致打包后文件体积 app.js 过大,首页加载缓慢
解决: 所以采用路由懒加载技术,匹配路由后再去import引入对应组件
语法: 在配置路由规则直接在component后以函数的形式导入组件路径
好处: 优化了加载性能,点击了哪个页面在去匹配对应组件

// router/ingdex.js
  {
    path: '/login',
    component: () => import('@/views/Login')
  },