原则
打包会有两方面的意思，第一在于提高打包的速度，第二在于对打包后的静态资源的优化。而对于静态资源的优化又不仅仅是打包提及的缩减。
对于打包资源优化的总体原则，在于尽可能的减少或者延迟模块的引用。主要遵循以下三点:
- 减小打包的整体体积
Code Splitting: 按需加载，优化页面首次加载体积。如根据路由按需加载，根据是否可见按需加载Bundle Splitting：分包，根据模块更改频率分层次打包，充分利用缓存
01 减小打包的整体体积
- 代码压缩：最典型的两种方法就是空白符替换以及缩短变量名
- 移除不必要的模块：
eslint - 选择可替代的体积较小的模块：
moment.js->day.js - 按需引入模块:
lodash、antd、echarts
02 Code Splitting:按需加载，优化页面首次加载体积
通过 Code Splitting 可以只加载当前所需要的核心资源：
- 如果你处在首页，并且首页中有占用资源过重的图表，需要对图表懒加载，否则它会大幅拖垮应用的首次渲染，加大白屏时间
- 如果你处在首页，你无需加载当前不可见屏幕下方的复杂组件
-
如果你处在页面 A，你没有必要加载页面 B 的资源
- 使用
import()动态加载模块 - 使用
React.lazy()动态加载组件 - 使用
lodable-component动态加载路由，组件或者模块
03 Bundle Splitting
除了资源体积上的优化，另一个大的优化就是缓存。单页应用有一个最好的方面，就是所有资源都是带有指纹信息的，这意味着所有的资源都是能够设置永久缓存的。
分包，根据模块更改频率分层次打包，充分利用缓存。对资源进行分层次缓存的打包方案，这是一个建议方案.
webpack-runtime: 应用中的webpack的版本比较稳定，分离出来，保证长久的永久缓存react-runtime:react的版本更新频次也较低vundor: 常用的第三方模块打包在一起，如lodash，classnames基本上每个页面都会引用到，但是它们的更新频率会更高一些
