React和Vue实现路由懒加载

在React中，可以使用React.lazy()函数来实现路由懒加载。React.lazy()函数接收一个函数，这个函数需要动态地调用import()函数并返回一个Promise，以异步地加载组件。下面是一个使用React.lazy()实现路由懒加载的示例：

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// 懒加载的组件
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

在上面的示例中，我们使用React.lazy()函数来懒加载Home、About和Contact组件。Suspense组件用来指定一个在组件加载过程中显示的加载提示界面。

在Vue中，可以使用Vue异步组件的特性来实现路由懒加载。可以使用Webpack的动态导入功能配合Vue的异步组件来实现懒加载。下面是一个使用Vue异步组件实现路由懒加载的示例：

const Home = () => import('./Home.vue');
const About = () => import('./About.vue');
const Contact = () => import('./Contact.vue');

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
];

const router = new VueRouter({
  routes,
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

在上面的示例中，我们使用Vue异步组件的方式来定义Home、About和Contact组件。在路由配置中，我们将这些异步组件作为相应路由的组件。

无论是React还是Vue，使用路由懒加载可以有效地减小初始加载的bundle大小，提升应用的性能。