欧美极品妇xxxxxbbbb,女士私密高潮医院,色播电影院

React Loadable

一個動態導入加載組件的高階組件.

示例

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

用戶反饋:

"我現在非常癡迷于: create-react-app、React Router v4 和 react-loadable的使用. 自由的代碼分割, 太簡單了."
"Webpack 2 upgrade & react-loadable; 花兩個小時就可以將初始化加載文件從1.1mb降到529kb."
"Oh hey - 使用 loadable 組件讓我初始化加載文件降到13kB. yeah!輕松搞定"
"太令人驚嘆了. 讓我主打包文件減少了50kb."
"我使用了 server-side rendering(服務端渲染) + code splitting(代碼分割) + PWA ServiceWorker 來緩存數據和資源 ?? (感謝 react-loadable). 現在我的前端程序快到飛起."

_ 如果你的公司或者項目也在使用 React Loadable，請加入這個列表(按照字母順序)

Also See:

react-loadable-visibility 和 react-loadable 使用相同的API構建, 這個組件能讓你動態加載只顯示在屏幕上的組件.

<h2>

<small>Guide</small>
</h2>

所以你現在有了一個React App, 并且你用Webpack去打包你的應用, 所有的事情看起來是那么的順暢. 但是有一天你突然發現你的文件變得越來越大，打包變得越來越慢。

這時候我們是時候該引入 code-splitting（代碼分割）到我們的項目中了!

A single giant bundle vs multiple smaller bundles

Code-splitting（代碼分割）是把項目中一個大的入口文件分割成多個小的、單獨的文件的進程。

這看起來很難，但是一些類似于Webpack的工具已經做到這些了，并且React Loadable是為了讓這件事兒變得更加簡單。

Route-based splitting(基于路由的代碼風格) vs. Component-based splitting(基于組件的代碼分割)

一般我們建議通過不同路由切斷你的程序，并且異步加載它們，這對于大多數應用來講很不錯-在瀏覽器里一個用戶點擊一個鏈接并且等待頁面加載完成是一個在正常不過的行為。

但是我們可以做的更好。

在React的大多數路由工具中，一個路由就是一個簡單的組件,這真沒有什么特殊的(Sorry Ryan和Michael-你們是特殊的)。所以我們如果通過組件而不是路由優化分割代碼，我們會得到什么呢？

Route vs. component centric code splitting

事實證明：相當多。不僅僅是通過路由，還有更多的地方你可以將你的應用程序拆分出來，Modals、tabs還有許多隱藏的UI組件，當用戶執行某些操作的時候，你再去加載他們。

Example: 假設你的主應用程序是在一個選項卡里,用戶可能永遠也不會進入這個選項卡下的應用程序，所以父路由組件為何要加載這個選項卡所對應的組件呢？

還有一個地方，你可以優先加載優先級高的組件。那些頁面底部的組件為何要和頁面頂部的組件同時加載呢？

由于路由即組件，所以我們仍然可以很輕松的在組件層面做code-split(代碼分割)

在一個新項目中使用code-spliting非常簡單，以至于你都不用想兩遍，你只需要改動少量代碼就可以完成自動的代碼分割。

React Loadable 簡介

React Loadable 是一個輕量級的代碼分割組件，它簡單到令人難以置信。

Loadable 是一個告誡組件 (一個創建并返回組件的函數)，它能讓你的應用程序在渲染之前動態的加載任何模塊

想象有兩個組件，一個組件是import的組件，另一個是渲染組件

import Bar from './components/Bar';

class Foo extends React.Component {
  render() {
    return <Bar/>;
  }
}

現在我們通過import引入Bar這個組件，這是一個同步的引入，但是我們在渲染之前是并不需要這個組件的，所以我們為何不推遲引入這個組件呢？

使用 dynamic import(動態引入) (a tc39 proposal currently at Stage 3)
我們可以修改組件Bar使之成為一個異步的。

class MyComponent extends React.Component {
  state = {
    Bar: null
  };

  componentWillMount() {
    import('./components/Bar').then(Bar => {
      this.setState({ Bar });
    });
  }

  render() {
    let {Bar} = this.state;
    if (!Bar) {
      return <div>Loading...</div>;
    } else {
      return <Bar/>;
    };
  }
}

但是這是一整個工作流程，并不是單純的代碼分割這一件事兒這么簡單，比如當import()失敗我們該怎么辦？怎么作server-side rendering(服務端渲染)？這時候你可以抽象出Loadable來解決這些問題。

import Loadable from 'react-loadable';

const LoadableBar = Loadable({
  loader: () => import('./components/Bar'),
  loading() {
    return <div>Loading...</div>
  }
});

class MyComponent extends React.Component {
  render() {
    return <LoadableBar/>;
  }
}

通過 `import()`自動 code-splitting(代碼分割)

在webpack2+中，當你使用import()的時候，它會為你自動代碼分割，而不用做外的設置。

這意味著通過使用React Loadable和import()可以很快的實驗出新的代碼分割點來，這是程序中的最佳實踐.

創建一個更好的"Loading..." 組件

渲染一個靜態的"Loading..."已經不能傳達出足夠的信息給用戶了。有時有我們還要想要表現出更多的狀態來，比如錯誤和超時等,這是一個非常好的經歷。

function Loading() {
  return <div>Loading...</div>;
}

Loadable({
  loader: () => import('./WillFailToLoad'), // oh no!
  loading: Loading,
});

這樣做非常好，你的loading component會接收多個不同的props。

Loading 的錯誤狀態

當loader加載失敗，loading component組件會接收一個error為true的prop(否則為false).

function Loading(props) {
  if (props.error) {
    return <div>Error!</div>;
  } else {
    return <div>Loading...</div>;
  }
}

避免 Loading 組件閃爍的問題

有時候你的組件加載速度非常快(<200ms),Loading組件的loading效果在屏幕上一閃而過.
許多用戶反饋，這樣的效果會導致用戶認為等待的時間要比實際時間還要長，但是如果你什么都不顯示，用戶反而認為加載很快。

所以你的loading compoent將會得到一個布爾類型為truepastDelay prop的返回值，當組件的加載時間比設置的delay時間長的時候。

function Loading(props) {
  if (props.error) {
    return <div>Error!</div>;
  } else if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}

默認的delay參數為200ms，但是你可以根據需要自定義delay這個參數值

Loadable({
  loader: () => import('./components/Bar'),
  loading: Loading,
  delay: 300, // 0.3 seconds
});

`loader`超時

有時候網絡連接斷開或者失敗，或者永久性掛起，這時候網頁無反應，用戶不知道是繼續等待還是重新刷新頁面。這時候當loader超時后loading component 將會接收一個timedOut prop 并且這個只值為true

function Loading(props) {
  if (props.error) {
    return <div>Error!</div>;
  } else if (props.timedOut) {
    return <div>Taking a long time...</div>;
  } else if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}

然而這個特性默認是被禁止的，如果想打開特性，你可以通過timeout option參數傳遞給 Loadable.

Loadable({
  loader: () => import('./components/Bar'),
  loading: Loading,
  timeout: 10000, // 10 seconds
});

自定義渲染

Loadable會渲染default導出的組件，如果你想渲染自定義導出的組件，請使用render option參數

Loadable({
  loader: () => import('./my-component'),
  render(loaded, props) {
    let Component = loaded.namedExport;
    return <Component {...props}/>;
  }
});

加載多個資源

從技術上講，你可以用loader()加載任何只要是一個promise的資源you're able to render something，但是這樣用起來確實有點讓人惱火。

你可以使用Loadable.Map讓加載多個資源變得更加容易一些。

Loadable.Map({
  loader: {
    Bar: () => import('./Bar'),
    i18n: () => fetch('./i18n/bar.json').then(res => res.json()),
  },
  render(loaded, props) {
    let Bar = loaded.Bar.default;
    let i18n = loaded.i18n;
    return <Bar {...props} i18n={i18n}/>;
  },
});

當使用Loadable.Map的時候，render() method是一個必要參數，他會傳遞一個匹配后的對象參數到loader中去。

預加載

還有一個優化項，你可以決定哪些組件在渲染之前進行預先加載。
比如：當按鈕點擊之前你需要加載一個新的組件，這個組件是被Loadable中的static preload method創建的。

const LoadableBar = Loadable({
  loader: () => import('./Bar'),
  loading: Loading,
});

class MyComponent extends React.Component {
  state = { showBar: false };

  onClick = () => {
    this.setState({ showBar: true });
  };

  onMouseOver = () => {
    LoadableBar.preload();
  };

  render() {
    return (
      <div>
        <button
          onClick={this.onClick}
          onMouseOver={this.onMouseOver}>
          Show Bar
        </button>
        {this.state.showBar && <LoadableBar/>}
      </div>
    )
  }
}

<h2>

<small>Server-Side Rendering(服務端渲染)</small>
</h2>

當你渲染所有所有已經動態加載完成的組件的時候，你將會得到一堆loading的效果，這看起來確實很糟糕，但是好消息是React Loadable在設計之初就支持服務端渲染的，這樣就不會出現首屏加載效果了。

我們通過Express開啟一個服務。

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './components/App';

const app = express();

app.get('/', (req, res) => {
  res.send(`
    <!doctype html>
    <html lang="en">
      <head>...</head>
      <body>
        <div id="app">${ReactDOMServer.renderToString(<App/>)}</div>
        <script src="/dist/main.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Running on http://localhost:3000/');
});

服務端預加載所有的組件

第一件事兒就是在渲染正確的內容之前，確保你的服務端已經加載了所有的組件了。

我們可以使用 Loadable.preloadAll
這個方法.他會返回一個所有組件加載完成的一個代理。

Loadable.preloadAll().then(() => {
  app.listen(3000, () => {
    console.log('Running on http://localhost:3000/');
  });
});

服務端拾起客戶端的狀態

這可能稍微有一些復雜，這可能會話費我們多一些的精力。
為了能讓客戶端接管服務端的狀態，我們需要在服務端使用相同的代碼，
為了實現這一點，我們首先就要通過loadable組件告訴我們到底哪個組件正在渲染。

聲明哪個模塊被加載

這里有兩個參數Loadable和Loadable.Map能告訴我們哪個組件正在加載： opts.modules 和
opts.webpack

Loadable({
  loader: () => import('./Bar'),
  modules: ['./Bar'],
  webpack: () => [require.resolveWeak('./Bar')],
});

但是我們不必太擔心這些參數，React Loadable有一個Babel plugin插件可以完成這些設置。

將 react-loadable/babel 加入到你的Babel config中:

{
  "plugins": [
    "react-loadable/babel"
  ]
}

現在這些參數將會被自動被創建。

找出哪些動態模塊正在被加載

下一步我們將找到當請求進來的時候，哪些模塊是真正需要被加載的。
為此，我們有一個Loadable.Capture組件可以使用，它能收集所有的被加載的模塊。

import Loadable from 'react-loadable';

app.get('/', (req, res) => {
  let modules = [];

  let html = ReactDOMServer.renderToString(
    <Loadable.Capture report={moduleName => modules.push(moduleName)}>
      <App/>
    </Loadable.Capture>
  );

  console.log(modules);

  res.send(`...${html}...`);
});

將加載的模塊映射到打文件上

為了確保客戶端加載了所有服務端渲染的模塊，我們需要將服務端的模塊和webpack打包出來的打包文件做一個映射。

這包含兩部分,第一部分我們需要讓Webpack告訴我們每個模塊需要哪個打包文件，為此我們可以使用React Loadable Webpack plugin插件，在webpack config中從react-loadable/webpack 引入ReactLoadablePlugin插件，傳遞一個filename參數，webpack會將打包文件作為一個JSON數據輸出到這個文件中去。

// webpack.config.js
import { ReactLoadablePlugin } from 'react-loadable/webpack';

export default {
  plugins: [
    new ReactLoadablePlugin({
      filename: './dist/react-loadable.json',
    }),
  ],
};

然后我們回到我們的服務端，用剛才文件中的數據將模塊轉換成打包文件的數據
將模塊轉換成打包文件，需要從react-loadable/webpack引入getBundles方法。

import Loadable from 'react-loadable';
import { getBundles } from 'react-loadable/webpack'
import stats from './dist/react-loadable.json';

app.get('/', (req, res) => {
  let modules = [];

  let html = ReactDOMServer.renderToString(
    <Loadable.Capture report={moduleName => modules.push(moduleName)}>
      <App/>
    </Loadable.Capture>
  );

  let bundles = getBundles(stats, modules);

  // ...
});

這時候我們可以通過<script>標簽渲染這些打包后的文件輸出到HTML中。

let bundles = getBundles(stats, modules);

res.send(`
  <!doctype html>
  <html lang="en">
    <head>...</head>
    <body>
      <div id="app">${html}</div>
      <script src="/dist/main.js"></script>
      ${bundles.map(bundle => {
        return `<script src="/dist/${bundle.file}"></script>`
      }).join('\n')}
    </body>
  </html>
`);

客戶端會等待所有的打包文件加載完成

因為Webpack的工作方式是，我們的主打包文件會比其他的scripts預先加載，所以我們需要等待所有的文件加載完成后才開始渲染。
為此我們需要一個全局的函數供我們調用當所有的打包文件被加載后，我們將在客戶端使用Loadable.preloadReady()這個方法，就像在服務器使用Loadable.preloadAll()這個方法一樣。

// src/entry.js
import React from 'react';
import ReactDOM from 'react-dom';
import Loadable from 'react-loadable';
import App from './components/App';

window.main = () => {
  Loadable.preloadReady().then(() => {
    ReactDOM.hydrate(<App/>, document.getElementById('app'));
  });
};

這時候在我們服務端返回的HTML的末尾處的 <script>標簽中調用那個全局函數。

let bundles = getBundles(stats, modules);

res.send(`
      ...
      <script src="/dist/main.js"></script>
      ${bundles.map(...).join('\n')}
      <script>window.main();</script>
    </body>
  </html>
`);

<h4 align="center">
Now server-side rendering should work perfectly!
</h4>

<h2>

`Loadable`

rendering前動態loading模塊的一個高階組件，當模塊無法被加載的時候，loading 組件會被渲染.

const LoadableComponent = Loadable({
  loader: () => import('./Bar'),
  loading: Loading,
  delay: 200,
  timeout: 10000,
});

它返回一個 LoadableComponent組件.

`Loadable.Map`

一個允許你并行加載多個資源點的高階組件。
Loadable.Map's opts.loader接收一個對象，并且需要opts.render方法

Loadable.Map({
  loader: {
    Bar: () => import('./Bar'),
    i18n: () => fetch('./i18n/bar.json').then(res => res.json()),
  },
  render(loaded, props) {
    let Bar = loaded.Bar.default;
    let i18n = loaded.i18n;
    return <Bar {...props} i18n={i18n}/>;
  }
});

當調用Loadable.Map中的render()方法，這個方法中的loaded參數將會和loader方法起到一樣的作用。

`Loadable` and `Loadable.Map` Options

`opts.loader`

一個加載模塊的promose函數

Loadable({
  loader: () => import('./Bar'),
});

當調用Loadable.Map的時候，它接收對象行函數。

Loadable.Map({
  loader: {
    Bar: () => import('./Bar'),
    i18n: () => fetch('./i18n/bar.json').then(res => res.json()),
  },
});

當調用Loadable.Map的時候，你也需要傳遞opts.render函數

`opts.loading`

當模塊加載或者加載失敗的時候，這個組件會被渲染。

Loadable({
  loading: LoadingComponent,
});

這個參數是必選參數，如果你不想渲染任何，讓它返回null就好了。

Loadable({
  loading: () => null,
});

`opts.delay`

延時毫秒數props.pastDelay后加載渲染loading組件，默認值是200

Loadable({
  delay: 200
});

查看關于更多delay.

`opts.timeout`

props.timedOut超時的毫秒數后顯示loading組件，默認是關閉的。

Loadable({
  timeout: 10000
});

更多關于 timeouts.

`opts.render`

自定義渲染加載模塊的函數
它接收 opts.loader代理返回的loaded參數和LoadableComponent傳遞的props兩個參數。

Loadable({
  render(loaded, props) {
    let Component = loaded.default;
    return <Component {...props}/>;
  }
});

`opts.webpack`

可選參數，可通過require.resolveWeak獲取返回的一個Webpack模塊id的集合。

Loadable({
  loader: () => import('./Foo'),
  webpack: () => [require.resolveWeak('./Foo')],
});

這個參數可通過Babel Plugin自動生成.

`opts.modules`

可選參數，imports模塊路徑的數組集合

Loadable({
  loader: () => import('./my-component'),
  modules: ['./my-component'],
});

可選參數，可通過Babel Plugin插件自動生成。

`LoadableComponent`

Loadable 和 Loadable.Map返回的組件.

const LoadableComponent = Loadable({
  // ...
});

當組件加載的時候調用opts.render方法，它會直接接收props參數。

`LoadableComponent.preload()`

LoadableComponent調用的一個靜態方法，可以讓組件預加載。

const LoadableComponent = Loadable({...});

LoadableComponent.preload();

返回一個代理，但是盡量避免此代理阻塞你的UI更新，否則會帶來非常不好的用戶體驗。

關于更多 preloading.

`LoadingComponent`

傳給opts.loading方法的一個組件.

function LoadingComponent(props) {
  if (props.error) {
    // When the loader has errored
    return <div>Error!</div>;
  } else if (props.timedOut) {
    // When the loader has taken longer than the timeout
    return <div>Taking a long time...</div>;
  } else if (props.pastDelay) {
    // When the loader has taken longer than the delay
    return <div>Loading...</div>;
  } else {
    // When the loader has just started
    return null;
  }
}

Loading({
  loading: LoadingComponent,
});

關于更多 loading components

`props.error`

LoadingComponent的一個布爾類型的參數，當loader模塊加載失敗的時候，為true.

function LoadingComponent(props) {
  if (props.error) {
    return <div>Error!</div>;
  } else {
    return <div>Loading...</div>;
  }
}

更多關于 errors.

`props.timedOut`

LoadingComponent組件設置timeout參數后,props.timedOut將接受一個布爾類型的返回值。

function LoadingComponent(props) {
  if (props.timedOut) {
    return <div>Taking a long time...</div>;
  } else {
    return <div>Loading...</div>;
  }
}

更多關于 timeouts.

`props.pastDelay`

LoadingComponent設置delay參數后，props.pastDelay將接受一個布爾類型的返回值.

function LoadingComponent(props) {
  if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}

更多關于delays.

`Loadable.preloadAll()`

等待所有被預加載的組件LoadableComponent.preload完成加載，允許你在各種環境里預加載你的組件，比如在服務端。

Loadable.preloadAll().then(() => {
  app.listen(3000, () => {
    console.log('Running on http://localhost:3000/');
  });
});

注意非常重要的一點，預先加載你所有聲明過的loadable組件在啟動你的服務.

Good:

// During module initialization...
const LoadableComponent = Loadable({...});

class MyComponent extends React.Component {
  componentDidMount() {
    // ...
  }
}

Bad:

// ...

class MyComponent extends React.Component {
  componentDidMount() {
    // During app render...
    const LoadableComponent = Loadable({...});
  }
}

注意: Loadable.preloadAll() 如果你的項目里有多個Loadable.preloadAll(),react-loadable將會失效。

更多關于 preloading on the server.

`Loadable.preloadReady()`

檢查瀏覽器里已經加載所有模塊并且調用matchingLoadableComponent.preload方法

window.main = () => {
  Loadable.preloadReady().then(() => {
    ReactDOM.hydrate(<App/>, document.getElementById('app'));
  });
};

更多關于 preloading on the client.

`Loadable.Capture`

記錄哪個模塊被渲染的一個組件.

每個被React Loadable組件在被渲染的時候，接收一個被每個moduleName調用的report prop。

let modules = [];

let html = ReactDOMServer.renderToString(
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <App/>
  </Loadable.Capture>
);

console.log(modules);

更多關于 capturing rendered modules.

Babel Plugin

為每個loadable 組件適配opts.webpack和opts.modules參數是一件很耗費體力的一件事兒，并且你還要始終記著去做。

你可以用Babel plugin寫到你的配置文件里去讓Webpack自動完成這件事兒，從而代替手動去做。

{
  "plugins": ["react-loadable/babel"]
}

Input

import Loadable from 'react-loadable';

const LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
});

const LoadableComponents = Loadable.Map({
  loader: {
    One: () => import('./One'),
    Two: () => import('./Two'),
  },
});

Output

import Loadable from 'react-loadable';
import path from 'path';

const LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  webpack: () => [require.resolveWeak('./MyComponent')],
  modules: [path.join(__dirname, './MyComponent')],
});

const LoadableComponents = Loadable.Map({
  loader: {
    One: () => import('./One'),
    Two: () => import('./Two'),
  },
  webpack: () => [require.resolveWeak('./One'), require.resolveWeak('./Two')],
  modules: [path.join(__dirname, './One'), path.join(__dirname, './Two')],
});

更多關于declaring modules.

Webpack Plugin

當服務端渲染的時候，為了send the right bundles down，你需要React Loadable Webpack plugin插件生成一個模塊和打包文件有對應關系的JSON文件.

// webpack.config.js
import { ReactLoadablePlugin } from 'react-loadable/webpack';

export default {
  plugins: [
    new ReactLoadablePlugin({
      filename: './dist/react-loadable.json',
    }),
  ],
};

它將產生一個JSON文件(opts.filename)，你可以引入這個模塊和打包文件相對應的JSON文件

更多關于 mapping modules to bundles.

`getBundles`

通過react-loadable/webpack方法可以導出一個模塊和打包文件的映射關系.

import { getBundles } from 'react-loadable/webpack';

let bundles = getBundles(stats, modules);

更多關于 mapping modules to bundles.

<h2>

如果避免重復調用?

假定你的Loadable()會重復設置loading組件和delay參數,你可以用高階組件 (HOC)去封裝一層Loadable,并為它設置一些默認參數.

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

export default function MyLoadable(opts) {
  return Loadable(Object.assign({
    loading: Loading,
    delay: 200,
    timeout: 10,
  }, opts));
};

這時候你只需要設置loader就可以使用它。

import MyLoadable from './MyLoadable';

const LoadableMyComponent = MyLoadable({
  loader: () => import('./MyComponent'),
});

export default class App extends React.Component {
  render() {
    return <LoadableMyComponent/>;
  }
}

不幸的是，如果你用HOC對Loadable封裝一層會使react-loadable/babel失效，所以這時候你需要手動的添加必要參數（modules, webpack）.

import MyLoadable from './MyLoadable';

const LoadableMyComponent = MyLoadable({
  loader: () => import('./MyComponent'),
  modules: ['./MyComponent'],
  webpack: () => [require.resolveWeak('./MyComponent')],
});

export default class App extends React.Component {
  render() {
    return <LoadableMyComponent/>;
  }
}

如果在服務端渲染中使用其他的比如`.css`或者`.map`資源

當你調用getBundles方法的時候，它會返回Javascript依賴的文件類型在你的Webpack配置中.

為得到這些，你需要手動的過濾一下文件類型,像這樣：

let bundles = getBundles(stats, modules);

let styles = bundles.filter(bundle => bundle.file.endsWith('.css'));
let scripts = bundles.filter(bundle => bundle.file.endsWith('.js'));

res.send(`
  <!doctype html>
  <html lang="en">
    <head>
      ...
      ${styles.map(style => {
        return `<link href="/dist/${style.file}" rel="stylesheet"/>`
      }).join('\n')}
    </head>
    <body>
      <div id="app">${html}</div>
      <script src="/dist/main.js"></script>
      ${scripts.map(script => {
        return `<script src="/dist/${script.file}"></script>`
      }).join('\n')}
    </body>
  </html>
`);

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

React Loadable

示例

用戶反饋:

用戶

Also See:

Route-based splitting(基于路由的代碼風格) vs. Component-based splitting(基于組件的代碼分割)

React Loadable 簡介

通過 import()自動 code-splitting(代碼分割)

創建一個更好的"Loading..." 組件

Loading 的錯誤狀態

避免 Loading 組件閃爍的問題

loader超時

自定義渲染

加載多個資源

預加載

服務端預加載所有的組件

服務端拾起客戶端的狀態

聲明哪個模塊被加載

找出哪些動態模塊正在被加載

將加載的模塊映射到打文件上

客戶端會等待所有的打包文件加載完成

Loadable

Loadable.Map

Loadable and Loadable.Map Options

opts.loader

opts.loading

opts.delay

opts.timeout

opts.render

opts.webpack

opts.modules

LoadableComponent

LoadableComponent.preload()

LoadingComponent

props.error

props.timedOut

props.pastDelay

Loadable.preloadAll()

Loadable.preloadReady()

Loadable.Capture

Babel Plugin

Webpack Plugin

getBundles

如果避免重復調用?

如果在服務端渲染中使用其他的比如.css或者.map資源

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

通過 `import()`自動 code-splitting(代碼分割)

`loader`超時

`Loadable`

`Loadable.Map`

`Loadable` and `Loadable.Map` Options

`opts.loader`

`opts.loading`

`opts.delay`

`opts.timeout`

`opts.render`

`opts.webpack`

`opts.modules`

`LoadableComponent`

`LoadableComponent.preload()`

`LoadingComponent`

`props.error`

`props.timedOut`

`props.pastDelay`

`Loadable.preloadAll()`

`Loadable.preloadReady()`

`Loadable.Capture`

`getBundles`

如果在服務端渲染中使用其他的比如`.css`或者`.map`資源