# 路由懶加載
路由懶加載的目的是為了讓首頁加載速度快，其實也是為了按需加載。在官方當中并未提供，好在社區中有許多人已經幫助我們實現了，我們可以查找文檔就可以知道。需要安裝**lazyload-loader**。
## 使用方式
```
output:{
……
publicPath:'/'
}
……
module: {
rules: [
{
test: /\.(js)$/,,
use: [
'babel-loader',
'lazyload-loader'
]
},
```
業務代碼中
```jsx
// 使用lazy! 前綴 代表需要懶加載的Router
import Shop from 'lazy!./src/view/Shop';
// Router 正常使用
<Route path="/shop" component={Shop} />
```
- webpack復習
- React基礎
- 前端三大主流框架對比
- React中幾個核心的概念
- React基礎語法
- React JSX語法
- React組件
- 普通組件
- 組件通信-父向子傳遞
- 組件拆成單個文件
- 面向對象復習
- Class組件基礎
- Class組件的私有狀態（私有數據）
- 案例：實現評論列表組件
- 組件樣式管理
- 組件樣式分離-樣式表
- CSS模塊化
- 生命周期
- React組件生命周期
- Counter組件來學習組件生命周期
- 生命周期總結
- 生命周期案例
- React評論列表
- React雙向數據綁定
- React版todolist
- 其它提高(了解)
- 組件默認值和數據類型驗證
- 綁定this并傳參的三種方式
- 祖孫級和非父子組件傳遞數據（了解）
- React路由
- 路由基礎
- 動態路由
- 路由嚴格模式
- 路由導航定位
- 路由重定向
- 路由懶加載
- WolfMovie項目
- 項目初始化
- AntDesign使用
- 其它相關了解