webpack and react 按需加载

react-router 中使用按需加载

• demo 地址
• 此处配合 create-react-app 使用，并配置 webpack 合理需要配置output.fileName和output.chunkFilename
• react 版本在 16.6 以后
• lazy 用于懒加载
• Suspense 延迟加载的效果

使用 react.lazy

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

const Program1 = lazy(() => import("./Program1"));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route path="/program1" component={Program1} />
      </Switch>
    </Suspense>
  </Router>
);

配置 webpack 4+版本

...
  output: {
    path: path.resolve(root, 'dist/dev'),
    publicPath: '/',
    filename: 'index.[hash:10].js',
    chunkFilename: '[name].[chunkhash:10].chunk.js',
  },
...

查看代码

参见

• webpack and react-router 按需加载(原理+react-router实现+高阶组件实现)