（14）combinReducers優(yōu)化

redux提供了一個(gè)combineReducers函數(shù)來(lái)合并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優(yōu)化

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

devtool: 'inline-source-map'

devtool，用于選擇一種 source map 來(lái)增強(qiáng)調(diào)試過(guò)程。
inline-source-map是轉(zhuǎn)換為 DataUrl 后添加到 bundle 中在验，便于調(diào)試肺孵。

（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(...)的方法實(shí)現(xiàn) require()的功能快骗；
style-loader將所有的計(jì)算后的樣式加入頁(yè)面中心剥； 二者組合在一起使你能夠把樣式表嵌入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的圖片會(huì)被轉(zhuǎn)成base64編碼腿椎，直接插入HTML中，減少HTTP請(qǐng)求夭咬。

（19）按需加載

按需加載必要性：
在打包完后啃炸，所有頁(yè)面只生成了一個(gè)build.js,當(dāng)我們首屏加載的時(shí)候，就會(huì)很慢卓舵。因?yàn)樗蚕螺d了別的頁(yè)面的js南用。如果每個(gè)頁(yè)面都打包了自己?jiǎn)为?dú)的JS，在進(jìn)入自己頁(yè)面的時(shí)候才加載對(duì)應(yīng)的js掏湾，那首屏加載就會(huì)快很多裹虫。
見(jiàn)官方版本：https://reacttraining.com/react-router/web/guides/code-splitting

a.安裝 bundle-loader

npm install bundle-loader --save-dev

b.創(chuàng)建 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="/">首頁(yè)</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;

我們可以看到，不同的頁(yè)面有不同的.js文件融击，但是名字卻很簡(jiǎn)單粗暴筑公，因此，修改webpack的配置的輸出文件中添加chunkFilename屬性尊浪。