webpack是最常见的构建/模块化工具了。当一个项目非常复杂的时候，工程化就会变得特别重要。
你很快就会发现热更新竟然需要1MIN是多么的痛苦。
webpack的热更新需要将整个项目全部重新编译一遍。有没有办法可以让编译的速度变快，提升开发速度呢？
从webpack编译的过程中进行分析：webpack的构建/编译过程：
- 从入口文件开始，递归查找所有的依赖
- 对每个模块进行loader匹配，匹配到了就使用对应的loader进行解析，并输出
webpack优化的方向
(1) 开发阶段：如何提升热更新编译速度、首次编译速度（并发、减少IO：缓存、算法复杂度优化）
- 并发
- thread-loader（了解node的并发）
- 减少IO
- loader增加include和exclude,减少模块的查找。
- thread-loader（了解node的并发）
- cache（了解cache规则，及如何配置)
开发模式设置成memory/fileSystem. maxMemoryGenerations:清除已经序列化且至少一次未用的项。再次使用的时候将他们从磁盘反序列化，最少使用内存，LRU算法：删除最近最少使用，增加cache命中率。 - resolve
- extensions:匹配模块的后缀类型数组，eg：tsx、ts、js尽量在前
- modules：通过确认modules的路径，减少搜索过程
- devtools，合理使用编译较快的方式
(2)生产产物：
通过减少体积、网络请求优化：
- 减少体积
- shared: 'lodash'
- optimization.splitChunks（优化chunks）（webpack.docschina.org/plugins/spl…
- 压缩：comporess
- threeShaking（依赖于usedExports是否打开）
- sideEffect（可以跳过整个模块，需要开发者手动配置可以跳过的模块:导出不被使用且被标记不包含副作用的模块）
- usedExports:是否打开模块使用了的标记
- 网络请求
- devtools：生产环境禁止生成sorceMap
