标签: code-splitting-async

我正在使用React Loadable对我的组件进行代码拆分,但问题是某些组件是从多个位置引用的.例如,我有这个组件CarsModule,在这样的多个区域中引用:

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

const CarsModule = Loadable({
  loader: () => import(/* webpackChunkName: "CarsModule" */ '../../../../components/CarsModule'),
  loading() {
    return <div>Loading...</div>
  }
});

最终发生在dist/react-loadable.json …

我正在使用create-react-app。我想要反应路由器基本代码分割，但我想获取用户在浏览器中打开的第一个块，然后在后台异步获取其他块

路线

const HomeModule  = React.lazy(() => import('./modules/ft_home_module/src/main'));
const AuthModule  = React.lazy(() => import('./modules/ft_auth_module/src/main'));
const ProfileModule  = React.lazy(() => import('./modules/ft_profile_module/src/main'));
const MerchantModule  = React.lazy(() => import('./modules/ft_merchant_module/src/main'));

<Route path="/home" component={HomeModule} />
<Route path="/auth" component={AuthModule} />
<Route path="/profile" component={ProfileModule} />
<Route path="/merchant" component={MerchantModule} />

假设，如果用户在浏览器中打开 /home，则在加载第一个块之后将首先加载 home 块，并在后台异步调用其他块

所需输出

1. /home在浏览器中打开
2. 首先获取 home 块
3. 然后其他三个块在后台异步执行

实际上我正在通过lighthouse chrome 扩展测试性能。路由器基本代码分割为我提供了第一页的良好性能，但是当我打开第二页时，它需要时间，但不应该花费时间。我认为如果我们在加载第一个块后在后台异步获取其他块，这是可能的

我是 vuejs 的新手，我想将 nprogress 与 vuejs 代码拆分功能一起使用。基本上我想要 nprogress 在使用导航到页面时。要求是显示进度，直到组件承诺无法解决。如何在我的应用程序中添加此功能？

这是我的代码：

import Vue from 'vue'
import Router from 'vue-router'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css';

// layout components
import Full from '../container/Full'

function asyncComponent(importComponent) {
  return importComponent()
  Nprogress.start();
  importComponent().then(() => {
    Nprogress.done();
    return importComponent();
  })
}

// dashboard components

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Full,
      redirect: '/dashboard/dashboard-v1',
      children: [
        {
          path: '/dashboard/dashboard-v1',
          component: asyncComponent(() => import('../views/dashboard/DashboardOne')),
          meta: {
            title: 'Dashboard V1',
            breadcrumb: 'Dashboard / Dashboard …