javaLuo / react-luo

React Automatically - 保持最新技术 react18 hooks router6 webpack5 babel7 antd4
https://isluo.com/work/pwa/
MIT License
312 stars 71 forks source link

有很多路由的时候,有什么简便的写法么? #37

Closed zhans1993 closed 5 years ago

zhans1993 commented 5 years ago

const Home = Loadable({ loader: () => import(/ webpackChunkName:'home' / '../home'), loading: Loading, // 自定义的Loading动画组件 timeout: 10000, // 可以设置一个超时时间(s)来应对网络慢的情况(在Loading动画组件中可以配置error信息) }); 我这样写报加载错误 let [ Login , Root] = [ "../loginPage/index", "../root/index" ].map(item => { let component = Loadable({ loader: () => import(${item}), loading: Loading, // 自定义的Loading动画组件 timeout: 10000 // 可以设置一个超时时间(s)来应对网络慢的情况(在Loading动画组件中可以配置error信息) }) return component })

zhans1993 commented 5 years ago

@javaLuo

javaLuo commented 5 years ago
()=> import(字符串)

异步import的参数只能是字符串,不能是变量
这是目前webpack的限制,没有办法完全动态编译
可以这样写:

let [Home, Test, Features, NotFound] = [
  () => import(`../home`),
  () => import(`../test`),
  () => import(`../features`),
  () => import(`../notfound`),
].map(item => {
 return Loadable({
    loader:item,
    loading: Loading
  })
}
);

Loadable插件也提供了Loadable.Map() 并行加载多个模块,
但貌似不好用,不知道是不是我使用方法不对。

zhans1993 commented 5 years ago

多谢luo哥