webpack打包优化

React项目中使用webpack4打包，跟踪导入的文件并将它合并到单个文件里，但随着项目的变大，包的体积也会变得非常大，自己慢慢尝试着做优化.

定位包内各个模块大小

在打包的过程中，需要定位哪些模块的体积偏大，webpack有插件

查看整个项目打包文件体积的结构、大小对比，通过交互式的可视化缩放treemap图展示webpack打包输出文件的大小。可以很直观看到bundle包含了哪些文件，各个模块的占比，哪个模块体积最大，帮助优化打包。最好的一点是，能够看到模块本来的大小，webpack解析的大小以及通过gizpped压缩之后的大小。

Code-Splitting运行时动态加载

懒加载用户当前需要的东西，能够显著提高应用程序的性能，虽然没有减少应该程序中的代码总量，但是避免加载当前用户不需要的代码，并且减少了初始化加载中的代码量。

提取公共模块

从webpack4开始移除了

以支持

模块化引入

在分析时发现，像lodash这种工具包占用体积过大，之前在项目中 引入lodash文件，实际上只引用lodash很小的一部分但实际上将整个lodash工具包引用进来了，所以更改了lodash的引用方式，通过只引用需要的部分

import { omit } from 'lodash'
//变为
import omit from 'lodash/omit'

改变之后的打包结果对比