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