前言
react+webpack4搭建前端项目分为三个章节。链接如下。目的是实现从零搭建一个react后台管理系统
1、react+webpack4搭建前端项目（一）基础项目搭建
2、react+webpack4搭建前端项目（二）react全家桶的使用
3、react+webpack4搭建前端项目（三）打包优化
webpack配置的讲解
4、react+webpack4.x搭建前端项目（四）配置抽取和区分环境
5、react+webpack4.x搭建前端项目（五）多页面配置
6、react+webpack4.x多模块打包配置
这里小编推荐一个福利，更多精彩内容请点击链接，点击这里
这是第三章，webpack打包优化
本编文章接着前两篇文章（1、react+webpack4搭建前端项目（一） 2、react+webpack4搭建前端项目（二）react全家桶的使用）项目的基础上进行webpack打包优化。废话不多说啦！撸起袖子开始干！
主要从以下几个方面进行：
react路由的异步加载-
css处理- 使用
mini-css-extract-plugin把css从bundle包中抽取 - 使用
optimize-css-assets-webpack-plugin压缩css代码 - 使用
postcss-loader，autoprefixer对浏览器兼容性的css代码加前缀
- 使用
-
js的处理- 使用
uglifyjs-webpack-plugin代码压缩 - 拆包，
js的bundle包的提取（拆包）
- 使用
前言
注意antd版本"antd": "^3.8.3",，高版本的antd官方把图标库也构建到release包，所以导致打包变得很大，仅仅icon图标库就有几百KB，请看下图。如果遇到这个问题，请降低antd的使用版本到3.8.3以前
下边打包优化的基础代码请点击 源码1.0.3。有不熟悉的同学可以看一下，下载该版本1.0.3，在项目根目录执行 npm run dev；同时切换到mock目录，执行 npm run dev，打开http://localhost:8081即可看到效果
主要实现的功能如下图：
简历管理的查询，删除，修改：
用户模块的查询，修改：
用户模块的添加：
首先我们看一下没有优化前的js包大小，执行npm run build
这时候打包出的文件只有三个
index.html模板文件
reset.min.css是从静态目录copy进去的
app.1a9adec2b6012290869f.js是我们利用webpack打包生成的。这里边包括项目中的所有js代码，css代码以及图片data资源
工欲善其事必先利其器，我们先安装两个非常有用的webpack插件
npm install -D clean-webpack-plugin webpack-bundle-analyzer
- clean-webpack-plugin 在打包的时候会删除之前的打包目录
- webpack-bundle-analyzer 在打包结束的时候，会启动启动一个服务在浏览器查看打包的大小和包含的内容等
修改webpack.prod.config.js，在plugins属性下添加
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin(),
开始打包优化
路由的异步加载
我们知道想文件的异步加载需要使用import("xxx")，或者require.ensure这种方法适用webapck1.x 2.x。所以这里采用import("xxx")。
在vue中实现路由的异步加载很简单，通过()=>import("xxx")就可以，那么在react中我们也可以这样异步加载
我们这里实现路由的异步加载借助react-loadable插件
详细使用请点击 react-loadable使用方法
1、首页编写一个loadable.js实现异步加载组件
import Loadable from 'react-loadable';
const LoadableComponent = (component) => Loadable({
loader: component,
loading: ()=>null,
});
export default LoadableComponent;
2、修改路由组件的加载方式
