（14）combinReducers優化

redux提供了一個combineReducers函數來合并reducer
src/redux/reducers.js

import counter from 'reducers/counter';
import userInfo from 'reducers/userInfo';

import {combineReducers} from "redux";

export default combineReducers({
    counter,
    userInfo
});

（15）devtool優化

src/webpack. config.js添加devtool屬性：

devtool: 'inline-source-map'

devtool，用于選擇一種 source map 來增強調試過程。
inline-source-map是轉換為 DataUrl 后添加到 bundle 中，便于調試。

（16）編譯SASS

a.安裝sass

npm install sass-loader node-sass --save-dev

b. 配置

{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},

（17）編譯css

npm install css-loader style-loader --save-dev
css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能；
style-loader將所有的計算后的樣式加入頁面中； 二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。
webpack.dev.config.js rules添加

{
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
}

（18）編譯圖片

a.安裝

npm install --save-dev url-loader file-loader

b.配置webpack.dev.config.js rules

{
      test: /\.(png|jpg|gif)$/,
      use: [{
        loader: 'url-loader',
        option: {
          limit: 8192
        }
      }]
     }

options limit 8192意思是，小于等于8K的圖片會被轉成base64編碼，直接插入HTML中，減少HTTP請求。

（19）按需加載

按需加載必要性：
在打包完后，所有頁面只生成了一個build.js,當我們首屏加載的時候，就會很慢。因為他也下載了別的頁面的js。如果每個頁面都打包了自己單獨的JS，在進入自己頁面的時候才加載對應的js，那首屏加載就會快很多。
見官方版本：https://reacttraining.com/react-router/web/guides/code-splitting

a.安裝 bundle-loader

npm install bundle-loader --save-dev

b.創建 bundle.js文件

在src/router/bundle.js下：

import React, {Component} from 'react';

class Bundle extends Component {
    state = {
        mod: null
    }
    componentWillMount() {
        this.load(this.props)
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.load !== this.props.load) {
            this.load(nextProps)
        }
    }
    load(this.props) {
        this.setState({
            mod: null
        })
        props.load((mod) => {
            this.setState({
                mod: mod.default ? mod.default : mod
            })
        })
    }
    render() {
        return this.state.mod ? this,props.children(this.state.mod) : null ;
    }

    export default Bundle;
}

c.改造路由

import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

import Bundle from './Bundle';
import Loading from 'component/Loading/Loading';

import Home from 'bundle-loader?lazy&name=home!pages/Home/Home';
import Page1 from 'bundle-loader?lazy&name=page1!pages/Page1/Page1';
import Counter from 'bundle-loader?lazy&name=counter!pages/Counter/Counter';
import UserInfo from 'bundle-loader?lazy&name=userInfo!pages/UserInfo/UserInfo';


const createComponent = (component) => () => (
    <Bundle load={component}>
        {
            (Component) => Component ? <Component/> : <Loading/>
        }
    </Bundle>
);

const getRouter = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/">首頁</Link></li>
                <li><Link to="/page1">Page1</Link></li>
                <li><Link to="/counter">Counter</Link></li>
                <li><Link to="/userInfo">UserInfo</Link></li>
            </ul>   
                <Route exact path="/" component={createComponent(Home)}/>
                <Route path="/page1" component={createComponent(Page1)}/>
                <Route path="/counter" component={createComponent(Counter)}/>
                <Route path="/userInfo" component={createComponent(UserInfo)}/>
        </div>
    </Router>
    );
export default getRouter;

我們可以看到，不同的頁面有不同的.js文件，但是名字卻很簡單粗暴，因此，修改webpack的配置的輸出文件中添加chunkFilename屬性。