webpack工作流程
bundle.min.js分析：
- 最开始是个立即执行函数；
- 将模块（1.js、2.js、3.js等）作为参数传入；
- 将require重写，_webpack_require_,这里做模块缓存，如果加载过了，则从缓存中取，没有就重新加载；
可视化打包结果分析
- 官方版本
window: webpack --profile --json | Out-file 'stats.json' -Encoding OEM
MAC:webpack --profile --json>stats.json
现在高版本window和mac一样 - 社区版本
webpack-bundle-analyzer
概念
- chunks: 即代码块，即webpack把js分成几个代码块；
- module：模块，每一个文件即一个模块；
有哪些可以优化的点
项目本身
- 减少依赖嵌套的深度；
- 使用尽可能少的处理；
webpack层面
dll处理
dll优化的原理：
- 第三方模块一般不会改动，可以先打包好，然后就不用再打包了；
- DllPlugin告诉webpack第三方插件已经打包就不再需要打包了;
写个例子：
将jquery插件先打包：
- 新建webpack.dll.js，打包生成_dll_jquery.js和jquery.manifest.json文件；
- webpack.config.js中加如下配置
- 在webpack构建之前，先构建webpack webpack.dll.js;
通过include减少loader范围
这样就只会对src和test目录下的typescript文件进行处理
HappyPack
原理：利用node可以开启多线程的特点来代替现有loader，多线程处理；
- 引入happypack插件
- 将需要happypack处理的loader换成下面写法
这样Happypack的使用就配置完了，运行项目，可以看到控制台打印如下提示：
开启多线程是有开销的，所以：
- 在测试 Demo 或者小型项目中，使用 happypack 对项目构建速度的提升不明显，甚至会增加项目的构建速度；
- 在比较复杂的大中型项目中，使用 happypack 才能看到比较明显的构建速度提升；
- 因此，在使用 happypack 时请根据具体情况进行选择，如果反而延长了项目的构建速度，就没有必要使用 happypack；
uglify优化
注意：webpack4 production模式下默认是压缩的
tree-shaking
其他
- 减少resolve（减少路径解析）；
- sourcemap（不同类型的sourcemap对应不同的速度）；
- cache-loader；
- 用新版本的node和webpack；
长缓存优化
- 浏览器会将静态资源，如js、css、img等缓存起来，这样的缓存称为长缓存；
- 因为长缓存的存在，也是为什么webpack打包要带上hash的原因，通过hash值来判断该文件是否要重新缓存；
- 所以利用这一点应该业务代码的hash值需要变化外，其他文件hash值都不应该变如vendor.[hash].js；
处理方式为：
- 把hash改为chunkhash；
chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。
