Webpack3+React16コード分割の実装

webpack3 + react16

'google-libphonenumber' から { PhoneNumberUtil } をインポートします
関数usePhoneNumberUtil(){
  // PhoneNumberUtil を使用する
}

const LibphonenumberModule = () => import('google-libphonenumber')
関数usePhoneNumberUtil(){
  LibphonenumberModule().then({PhoneNumberUtil} => {
    // PhoneNumberUtil を使用する
  })
}

'react' から React をインポートします。
'react-router-dom' から Route、Switch をインポートします。
const Home = import('./routes/Home');
About = import('./routes/About');

定数App = () => (
<ルーター>
 <Suspense fallback={<div>読み込み中...</div>}>
  <スイッチ>
   <ルートの正確なパス="/" コンポーネント={Home}/>
   <ルート パス="/about" コンポーネント={About}/>
  </スイッチ>
 </サスペンス>
</ルーター>
);

React をインポートします。{ lazy } から 'react';
'react-router-dom' から Route、Switch をインポートします。
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

定数App = () => (
// ルーティング設定は変更されません)

// 多くのコンポーネント.js
エクスポート const MyComponent = /* ... */;
エクスポート const MyUnusedComponent = /* ... */;

// MyComponent.js
"./ManyComponents.js" から { MyComponent をデフォルトとして } をエクスポートします。

// MyApp.js
React をインポートします。{ lazy } から 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

'./components/asyncComponent.js' から AsyncComponent をインポートします。
const Home = AsyncComponent(() => import('./routes/Home'));
const About = AsyncComponent(() => import('./routes/About'));

// 非同期ロードコンポーネント
関数 AsyncComponent(getComponent) {
 戻りクラスAsyncComponentはReact.Componentを拡張します{
  静的コンポーネント = null
  状態 = { コンポーネント: AsyncComponent.Component }

  コンポーネントマウント() {
   if (!this.state.Component) {
    getComponent().then(({ デフォルト: コンポーネント }) => {
     AsyncComponent.Component = コンポーネント
     this.setState({ コンポーネント })
    })
   }
  }
  // コンポーネントはアンマウントされます
  コンポーネントのマウントを解除します（）{
   // setState 関数を書き換え、何も返さない
   this.setState = () => {
    戻る
   }
  }
  与える（） {
   const { コンポーネント } = this.state
   if (コンポーネント) {
    <Component {...this.props} /> を返します。
   }
   nullを返す
  }
 }
}

関数 readFileList(dir, filesList = []) {
 定数ファイル = fs.readdirSync(dir)
 files.forEach((item) => {
  fullPath = path.join(dir, item) とします。
  const stat = fs.statSync(fullPath)
  （stat.isDirectory()）の場合{
   // すべてのファイルを再帰的に読み取る readFileList(path.join(dir, item), filesList)
  } それ以外 {
   /\.js$/.test(fullPath) && filesList.push(fullPath)
  }
 })
 ファイルリストを返す
}
exports.commonPaths = readFileList(path.join(__dirname, '../src/components'), [])

'**' から conf をインポートします。
モジュール.エクスポート = {
 エントリー: {
  共通: conf.commonPaths、
  インデックス: ['babel-polyfill', `./${conf.index}`],
 },
 ... //その他の設定プラグイン:[
  新しい webpack.optimize.CommonsChunkPlugin('common')、
  ... // その他のプラグイン
 ]
}