路由组件按需加载

package-lock.json

@@ -971,6 +971,30 @@
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@loadable/component": {
+      "version": "5.10.1",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.10.1.tgz",
+      "integrity": "sha512-nYb38UbPWCWB9R8US4Za0JzgjS1QaY13STJhU7ZUsfO2qG3k5huppVF92eX2iauhfpdrRkCDQqi+Fg/US4FXIg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.4.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "7.2.2",
+    "@loadable/component": "^5.10.1",
     "@svgr/webpack": "4.1.0",
     "antd-mobile": "^2.2.11",
     "autoprefixer": "^9.5.1",

src/components/coupons/exchange-coupons/coupons.scss

-#coupons {
-    height: 100%;
-    display: flex;
-    flex-flow: column;
-
-    .empty {
-        padding-top: 140px;
-        background: $bg_f5f5f5;
-        flex: 1;
-        text-align: center;
-        color: $color_666;
-        font-size: $font_12;
-
-        .iconfont {
-            color: #ef4d4e;
-            font-size: $font_16;
-        }
-
-    }
-
-    .coupon-list {
-        padding: 72px 12px 0;
-    }
-}
\ No newline at end of file

src/components/coupons/exchange-coupons/index.js

-import React, { PureComponent } from 'react'
-import './coupons.scss'
-
-// import { Toast } from "antd-mobile";
-
-import Coupon from '../common/Coupon'
-import ExchangeBar from '../common/ExchangeBar'
-
-
-const mockData = [
-    {
-        type: 1,
-        couponName: '代金券',
-        expire_time: '2017-12-31',
-        limit: '可用于大于代金券金额的课程',
-        denomination: '5'
-    },
-    {
-        type: 2,
-        couponName: '代金券',
-        expire_time: '2017-12-31',
-        limit: '可用于大于代金券金额的课程',
-        denomination: '5'
-    },
-]
-
-
-class ExchangeCoupons extends PureComponent {
-    state = {
-        exchangeCode: ''
-    }
-
-    onChange = (val) => {
-        this.setState({exchangeCode: val})
-    }
-
-    useCoupon = (val) => {
-        console.log(val)
-    }
-
-    render() {
-        return (
-            <div id='coupons'>
-                <ExchangeBar
-                    onChange={this.onChange}
-                    exchangeCode={this.state.exchangeCode}
-                />
-                <Content
-                    coupons={mockData}
-                    toUse={this.useCoupon}
-                    showUseButton={true}
-                    purpose={'exchange'}
-                />
-            </div>
-        );
-    }
-}
-
-function Empty() {
-    return (
-        <div className='empty'>
-            <div>
-                <p><i className='iconfont iconfrench_fries'></i></p>
-                <p>静待活动，什么券都有~</p>
-            </div>
-        </div>
-    )
-}
-
-function Content({coupons, onClick, ...rest}) {
-    if (coupons.length === 0) {
-        return <Empty/>
-    }
-    return (
-        <ul className='coupon-list'>
-            {
-                mockData.map((item, index) => {
-                    return <Coupon
-                        {...item}
-                        key={index}
-                        onClick={onClick}
-                        {...rest}
-                        index={index}
-                    />
-                })
-            }
-        </ul>
-    )
-}
-
-/*function Text({text}) {
-    return Toast.info(text, 1)
-}*/
-
-export default ExchangeCoupons;
\ No newline at end of file

src/components/coupons/use-coupons/index.js → src/components/coupons/index.js

-import React, { Component } from 'react';
-import './use-coupon.scss'
+import React, { PureComponent } from 'react';
+import './coupons.scss'
 
-import ExchangeaBar from "../common/ExchangeBar";
-import Coupon from '../common/Coupon'
+import ExchangeaBar from "./ExchangeBar";
+import Coupon from './Coupon'
 import { http, api } from '@/utils'
 
 const mockData = {
@@ -41,7 +41,7 @@ const mockData = {
 }
 
 
-class UseCoupon extends Component {
+class UseCoupon extends PureComponent {
 
     state = {
         selected: 0,
@@ -49,11 +49,11 @@ class UseCoupon extends Component {
         couponList: []
     }
 
-    componentDidMount(){
-        http.get(`${api.home}/m/coupon/all`)
+    componentDidMount() {
+        this.getMyCoupons()
             .then(res => {
                 const data = res.data
-                if(data.code === 200){
+                if (data.code === 200) {
                     this.setState({
                         couponList: data.data
                     })
@@ -72,6 +72,15 @@ class UseCoupon extends Component {
         this.setState({exchangeCode: val})
     }
 
+    getMyCoupons = () => {
+        return http.get(`${api.home}/m/coupon/all`)
+    }
+
+    selectCoupon = () => {
+
+    }
+
+
     render() {
         return (
             <div className='use-coupon'>

src/router/router-config.js

+import loadable from '@loadable/component'
+
+
 import Index from '@/components/Index';
 import Classify from '@/components/classify';
-import Study from '@/components/study';
 import My from '@/components/my';
 import CourseList from '@/components/classify/courselist';
 import Order from '@/components/order/index';
@@ -9,12 +11,12 @@ import Search from '@/components/search/index'
 import SearchResult from '@/components/search/search-result'
 import Detail from '@/components/detail/index'
 import Examination from '@/components/examination'
-import ExchangeCoupons from '@/components/coupons/exchange-coupons'
-import UseCoupon from '@/components/coupons/use-coupons'
 import ShopCard from '@/components/shopCard/index';
 import BargainMiddlePage from '@/components/bargainMiddlePage';
 import Passport from '@/components/passport'
 
+const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
+const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
 
 export default [
     {
@@ -64,12 +66,8 @@ export default [
         component: Examination
     },
     {
-        path: '/exchange-coupons',
-        component: ExchangeCoupons
-    },
-    {
-        path: '/use-coupon',
-        component: UseCoupon
+        path: '/coupons',
+        component: Coupons
     },
     {
         path: '/shopcard',