react+webpack+react-router+redux

（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属性。