本地mock的思考

背景

最近在维护老的单页面应用，需要增加新的页面，但是最开始没有mock功能，因此打算实现一套。本来计划是用mock API,考虑到方便就采用了本地文件mock，通过在url后面增加字段，来确定是否走mock。

实现

   //增加个mock目录
   //index.js

   import { statisticsPositions, currentMonthGoodsRank} from './performGoods'; //业绩商品
   export default {
    '_dcso_api_statistics_positions': statisticsPositions, //职位维度
    '_api_statistics_currentMonthGoodsRank': currentMonthGoodsRank //本月商品
   }

  //其他的就是根据功能划分的mock，比如performGoods.js 是业绩商品的mock

http拦截器处理

   import mockData from '@/mock/'
   const NODE_ENV = process.env.NODE_ENV;
   const mockFlag = getQuery('yaobd_h5_env_test'); //是否是mock
   const getMockData =  (url) => {
      const dealUrl = url && url.replace(/\//g, '_');
	  return mockData[dealUrl];
   }


  //拦截器中
 if(mockFlag) {
    return new Promise((resolve, reject) => {
	  resolve(getMockData(url));
    })
  }
   

问题

mock数据打包到bundle中，加载无用的数据，影响性能。

优化

采用异步加载mock文件

let mockData = null; //mock数据

const getMockDataSync = () => {
  return new Promise((resolve, reject) => {
    import('@/mock/index.js').then((data) =>{
      resolve(data.default);
    }).catch(e => {
      reject(data)
    }) 
  })
}


const NODE_ENV = process.env.NODE_ENV;
const mockFlag = getQuery('yaobd_h5_env_test'); //是否是mock
const getMockData = async (url) => {
  const dealUrl = url && url.replace(/\//g, '_');
  if(!mockData) {
    mockData = await getMockDataSync();
  }
	return mockData[dealUrl];
}

  //拦截器中
 if(mockFlag) {
    return new Promise((resolve, reject) => {
	  resolve(getMockData(url));
    })
  }