最近做了一個學(xué)習(xí)平臺的項目打包后build.js 4M 沒看錯 就是4M 還是壓縮后的，一臉懵逼
難受帮非。。兑宇。启上。
剛進(jìn)首頁加載這個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
})
}
然后在路由頁面調(diào)用這個組件
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')
);
只需要在路由頁面用組件包裹一下，別的都不用變
然后執(zhí)行 npm run build
發(fā)現(xiàn)一個js文件被切割成好多個溅固， 每次調(diào)用路由的時候才會去調(diào)用那個所需要的js文件付秕，
速度回快很多，但是總大小還是沒小侍郭。代碼問題各位見笑了询吴，我去看看還有什么模塊用不上的放進(jìn)去了！
謝謝 再見Ａ猎猛计！
