react 使用@loadable/component 实现路由动态懒加载

踩坑记录

• 动态引入import()变量失效问题， import不能导入变量字符串的路径问题
• 因为webpack的现在的实现方式不能实现完全动态，所以可以通过字符串模板来提供部分信息给webpack，如下
  

/**
 * 根据已经获取的菜单组合需要生成的路由
 * @param list 数据
 * @param parentPath 父级的路径，组合子级可访问路径
 */
const combinationRouting = (list: Menus[], parentPath?: string) => {

  let portMenu: PortfolioMenuType[] = [];
  list.forEach((item: Menus) => {
    const path = parentPath ? parentPath + item.url : item.url;

    const obj: PortfolioMenuType = {
      path,
      component: () => import(`../pages${path}/index`),
      name: item.id,
    };
    // 是否存在子级
    if (item.children && item.children.length > 0) {
      const result: PortfolioMenuType[] = combinationRouting(item.children, item.url);
      portMenu = portMenu.concat(result);
    }
    if (!parentPath) {
      portMenu.push(obj);
    }
  });
  return portMenu;
}

export { combinationRouting }