Reactjs 使用React.lazy、suspend和React路由器dom进行代码拆分'；行不通_Reactjs_Typescript_Webpack_React Router Dom_Code Splitting

Reactjs 使用React.lazy、suspend和React路由器dom进行代码拆分'；行不通

reactjs typescript webpack

Reactjs 使用React.lazy、suspend和React路由器dom进行代码拆分'；行不通,reactjs,typescript,webpack,react-router-dom,code-splitting,Reactjs,Typescript,Webpack,React Router Dom,Code Splitting,我试图建立一个非常基本的示例，类似于：它应该延迟加载路由组件（ModuleOne或ModuleVo），并根据当前路由动态加载它们的依赖项然而，看起来代码拆分不起作用，所有内容都包含在一个包中 webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index',

我试图建立一个非常基本的示例，类似于：

它应该延迟加载路由组件（ModuleOne或ModuleVo），并根据当前路由动态加载它们的依赖项

然而，看起来代码拆分不起作用，所有内容都包含在一个包中

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index',
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, '../dist'),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    modules: ['node_modules', path.resolve(__dirname, '../src')],
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  }
};

App.tsx

import * as React from 'react';
import { HashRouter as Router, Link, Route, Switch } from 'react-router-dom';
import * as styles from './App.scss';

const LazyModuleOne = React.lazy(() => import('../modules/ModuleOne/ModuleOne'));
const LazyModuleTwo = React.lazy(() => import('../modules/ModuleTwo/ModuleTwo'));

const App = () => (
    <Router>
        <div className={styles.wrapper}>
            <nav>
                <Link to="/">Start</Link>
                <Link to="/module-one">Module One</Link>
                <Link to="/module-two">Module Two</Link>
            </nav>
            <main>
                <React.Suspense fallback={<div>Loading...</div>}>
                    <Switch>
                        <Route path="/module-one" component={LazyModuleOne} />
                        <Route path="/module-two" component={LazyModuleTwo} />
                    </Switch>
                </React.Suspense>
            </main>
        </div>
    </Router>
);

export default App;

import*as React from'React'；
从'react Router dom'导入{HashRouter as Router，Link，Route，Switch}；
从“/App.scss”导入*作为样式；
const LazyModuleOne=React.lazy（（）=>import（'../ModuleOne/ModuleOne'）；
const LazyModuleTwo=React.lazy（（）=>import（'../module/modulewo/modulewo'））；
常量应用=（）=>(
开始
单元一
单元二
);
导出默认应用程序；

ModuleOne.tsx

import * as React from 'react';
import * as _ from 'lodash';
import { RouteComponentProps } from 'react-router';

const apples = _.fill([1,2,3], 'apple');

const ModuleOne: React.FC<RouteComponentProps> = () => (
  <div>
    <div>ModuleOne</div>
    <div>There are {apples.length} apples</div>
  </div>
)

export default ModuleOne;

import*as React from'React'；
从“lodash”导入*as uuu；
从“react router”导入{RouteComponentProps}；
常量apples=u.fill（[1,2,3]，'apple'）；
const ModuleOne:React.FC=（）=>(
模内
有{苹果。长度}苹果
)
导出默认模块One；

模块化

import * as React from 'react';
import * as R from 'ramda';
import { RouteComponentProps } from 'react-router';

const cherries = [1,2,3];

const ModuleTwo: React.SFC<RouteComponentProps> = () => (
  <div>
    <div>ModuleTwo</div>
    <div>There are {R.length(cherries)} cherries</div>
  </div>
)

export default ModuleTwo;

import*as React from'React'；
从“拉姆达”进口*作为R；
从“react router”导入{RouteComponentProps}；
常量樱桃=[1,2,3]；
const modulewo:React.SFC=（）=>(
模
有{R.length（cherries）}个樱桃
)
导出默认的modulewo；

演示：

有人知道为什么基于路由的代码拆分不能按预期工作吗？

我的react版本是16.4.0，可以工作了

我和你之间唯一的区别是：

我正在使用浏览器路由器。

您使用了HashRouter。

我找到了解决方案。它与

TypeScript