以下是手动代码拆分之前的相关代码:
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Protected from '../container-components/authentication/protected.js';
import LoginContainer from '../container-components/authentication/loginContainer.js';
import axios from 'axios';
import {Loader} from 'semantic-ui-react';
render(){
if(this.state.isLoading){
return(
<div>
<Loader style={{marginTop: '30vh'}} active inline='centered'/>
</div>
)
}
return(
<BrowserRouter>
<div>
<Switch>
<Route
path='/stream'
render={(props) =>
<Protected {...props}
isLoggedIn={this.state.isLoggedIn}
onLogout={this.handleLogout}
user={this.state.user}
/>
}
/>
<Route
path='*'
render={(props) =>
<LoginContainer {...props}
isLoggedIn={this.state.isLoggedIn}
onLogin={this.handleLogin}
/>
}
/>
</Switch>
</div>
</BrowserRouter>
)
这是代码拆分后的代码:
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import LoginContainer from '../container-components/authentication/loginContainer.js';
import axios from 'axios';
import {Loader} from 'semantic-ui-react';
import Loadable from 'react-loadable';
const LoadableProtected = Loadable({
loader: () => import('../container-components/authentication/protected.js'),
loading: Loader,
render(loaded, props) {
let Component = loaded.default;
return <Component {...props} />
}
})
render(){
if(this.state.isLoading){
return(
<div>
<Loader style={{marginTop: '30vh'}} active inline='centered'/>
</div>
)
}
return(
<BrowserRouter>
<div>
<Switch>
<Route
path='/stream'
render={(props) =>
<LoadableProtected {...props}
isLoggedIn={this.state.isLoggedIn}
onLogout={this.handleLogout}
user={this.state.user}
/>
}
/>
<Route
path='*'
render={(props) =>
<LoginContainer {...props}
isLoggedIn={this.state.isLoggedIn}
onLogin={this.handleLogin}
/>
}
/>
</Switch>
</div>
</BrowserRouter>
)
}
我也在这里试过这个教程:https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
这似乎是反应负载正在做的事情 .
我正在使用webpack v4和一个弹出的create-react-app以及以下的babel包/ plugins:
“@ babel / cli”:“^ 7.2.0”“@ babel / plugin-proposal-class-properties”:“^ 7.2.1”“@ babel / plugin-proposal-export-default-from”:“^ 7.2 .0“”@ babel / preset-env“:”^ 7.2.0“”acorn“:”^ 6.0.4“”babel-eslint“:”^ 9.0.0“”babel-plugin-dynamic-import-node “:”^ 2.2.0“”babel-plugin-lodash“:”^ 3.3.4“”babel-core“:”^ 6.26.3“,”babel-jest“:”20.0.3“,”babel- loader“:”^ 8.0.4“,”babel-preset-react-app“:”^ 6.1.0“,”babel-runtime“:”*“,
这不是一个大问题,它不是减少捆绑大小,我似乎无法弄清楚为什么会这样 .