最近做了一个学习平台的项目打包后build.js 4M 没看错 就是4M 还是压缩后的，一脸懵逼
难受。。。。
刚进首页加载这个js文件8S ，差点没被打死。
看了一下 js 按需加载，配置了一下webpack
打包工具我用的是 react-app-rewired ；
需要用上2个模块：
npm i react-loadable --save
npm install babel-plugin-syntax-dynamic-import --save
两个模块有很多教程，各位可以去深入了解
先写上一个高阶组件：
//loadable.jsx
import React from 'react';
import Loadable from 'react-loadable';
import {Card} from 'antd';
// 按需加载组件
export default function withLoadable (comp) {
return Loadable({
loader:comp,
loading:(props)=>{
if (props.error) {
return <Card style={{width:"100%",height:"100%"}} >
加载错误。请刷新
</Card>;
} else if (props.timedOut) {
return <Card style={{width:"100%",height:"100%"}} >
加载超时。请刷新
</Card>;
} else if (props.pastDelay) {
return <Card loading={true} style={{width:"100%",height:"100%"}} />;
} else {
return null;
}
},
timeout:10000
})
}
然后在路由页面调用这个组件
import React from 'react';
import ReactDOM from 'react-dom';
import { Form } from 'antd';
import ConfigureStore from './stores';
import {
Route,
HashRouter
} from 'react-router-dom';
import { Provider } from 'react-redux';
import Loadable from './js/commom/loadable.jsx';
const Nav = Loadable(() => import('./js/nav'));
const Signup = Loadable(() => import('./js/signup.jsx'));
const apptools = Loadable(() => import('./js/apptools'));
const Space = Loadable(() => import('./js/space'));
const HomePage = Loadable(() => import('./js/homePage'));
const CoursesMD = Loadable(() => import('./js/coursesMD'));
const Courses = Loadable(() => import('./js/courses'));
const CoursesList = Loadable(() => import('./js/courseslist'));
const CoursesSchool = Loadable(() => import('./js/courseSchool'));
const Footer = Loadable(() => import('./js/footer'));
const Activatemail = Loadable(() => import('./js/user/activatemail'));
const ResetPassWord = Loadable(() => import('./js/user/resetPassWord'));
const Community = Loadable(() => import('./js/community'));
const ApplyStl = Loadable(() => import('./js/applyStl'));
const personalCenter = Loadable(() => import('./js/personalCenter'));
const WrappedResetPassWord = Form.create()(ResetPassWord)
const store = ConfigureStore();
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
userInfo:null
};
}
getUserInfo = (data)=>{
this.setState({
userInfo:data
})
}
render(){
return (
<HashRouter>
<div>
<Route render={(props)=><Nav {...props} UserInfo={this.state.userInfo} /> } />
<Route exact path="/" component={HomePage} />
<Route exact path="/courses" component={Courses} />
<Route path="/signup" component={Signup} />
<Route exact path="/apptools" component={apptools} />
<Route exact path="/space" render={(props)=><Space {...props} getUserInfo={this.getUserInfo}/>} />
<Route exact path="/coursesMD" component={CoursesMD} />
<Route exact path="/courseslist" render={(props)=><CoursesList {...props} /> } />
<Route exact path="/courseschool" render={(props)=><CoursesSchool {...props} /> } />
<Route exact path="/user/Activatemail" component={Activatemail} />
<Route exact path="/user/resetPassWord" component={WrappedResetPassWord} />
<Route exact path="/community" component={Community} />
<Route exact path="/community/applyStl/:id" component={ApplyStl} />
<Route exact path="/personalCenter/:userID" component={personalCenter} />
<Footer />
</div>
</HashRouter>
)
}
}
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
只需要在路由页面用组件包裹一下，别的都不用变
然后执行 npm run build
发现一个js文件被切割成好多个， 每次调用路由的时候才会去调用那个所需要的js文件，
速度回快很多，但是总大小还是没小。代码问题各位见笑了，我去看看还有什么模块用不上的放进去了！
谢谢 再见！！
