Webpack4打包速度优化

webpack工作流程

bundle.min.js分析：

1. 最开始是个立即执行函数；
2. 将模块（1.js、2.js、3.js等）作为参数传入；
3. 将require重写，_webpack_require_,这里做模块缓存，如果加载过了，则从缓存中取，没有就重新加载；

可视化打包结果分析

1. 官方版本 window: webpack --profile --json | Out-file 'stats.json' -Encoding OEM MAC:webpack --profile --json>stats.json 现在高版本window和mac一样
2. 社区版本 webpack-bundle-analyzer

概念

1. chunks: 即代码块，即webpack把js分成几个代码块；
2. module：模块，每一个文件即一个模块；

有哪些可以优化的点

项目本身

1. 减少依赖嵌套的深度；
2. 使用尽可能少的处理；

webpack层面

dll处理

dll优化的原理：

1. 第三方模块一般不会改动，可以先打包好，然后就不用再打包了；
2. DllPlugin告诉webpack第三方插件已经打包就不再需要打包了; 写个例子：

将jquery插件先打包：

1. 新建webpack.dll.js，打包生成_dll_jquery.js和jquery.manifest.json文件；
2. webpack.config.js中加如下配置
3. 在webpack构建之前，先构建webpack webpack.dll.js;

通过include减少loader范围

这样就只会对src和test目录下的typescript文件进行处理

HappyPack

原理：利用node可以开启多线程的特点来代替现有loader，多线程处理；

1. 引入happypack插件
2. 将需要happypack处理的loader换成下面写法

这样Happypack的使用就配置完了，运行项目，可以看到控制台打印如下提示：

开启多线程是有开销的，所以：

1. 在测试 Demo 或者小型项目中，使用 happypack 对项目构建速度的提升不明显，甚至会增加项目的构建速度；
2. 在比较复杂的大中型项目中，使用 happypack 才能看到比较明显的构建速度提升；
3. 因此，在使用 happypack 时请根据具体情况进行选择，如果反而延长了项目的构建速度，就没有必要使用 happypack；

uglify优化

注意：webpack4 production模式下默认是压缩的

tree-shaking

其他

1. 减少resolve（减少路径解析）；
2. sourcemap（不同类型的sourcemap对应不同的速度）；
3. cache-loader；
4. 用新版本的node和webpack；

长缓存优化

1. 浏览器会将静态资源，如js、css、img等缓存起来，这样的缓存称为长缓存；
2. 因为长缓存的存在，也是为什么webpack打包要带上hash的原因，通过hash值来判断该文件是否要重新缓存；
3. 所以利用这一点应该业务代码的hash值需要变化外，其他文件hash值都不应该变如vendor.[hash].js；

处理方式为：

1. 把hash改为chunkhash；

chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

webpack系列课程