9 webpack编译优化

代码优化:

无用代码消除，是许多编程语言都具有的优化手段，这个过程称为 DCE (dead code elimination)，即删除不可能执行的代码；

例如我们的 UglifyJs，它就会帮我们在生产环境中删除不可能被执行的代码，例如:

    var fn = function() {
    	return 1;
    	// 下面代码便属于 不可能执行的代码；
    	// 通过 UglifyJs (Webpack4+ 已内置) 便会进行 DCE；
    	var a = 1;
    	return a;
    }

摇树优化 (Tree-shaking)，这是一种形象比喻。我们把打包后的代码比喻成一棵树，这里其实表示的就是，通过工具 "摇" 我们打包后的 js 代码，将没有使用到的无用代码 "摇" 下来 (删除)。即消除那些被引用了但未被使用的模块代码。

原理: 由于是在编译时优化，因此最基本的前提就是语法的静态分析，ES6的模块机制提供了这种可能性。不需要运行时，便可进行代码字面上的静态分析，确定相应的依赖关系。
问题: 具有副作用的函数无法被 tree-shaking
- 在引用一些第三方库，需要去观察其引入的代码量是不是符合预期；
- 尽量写纯函数，减少函数的副作用；
- 可使用 webpack-deep-scope-plugin，可以进行作用域分析，减少此类情况的发生，但仍需要注意；

code-spliting: 代码分割技术 ，将代码分割成多份进行懒加载或异步加载，避免打包成一份后导致体积过大，影响页面的首屏加载；

scope hoisting : 作用域提升，将分散的模块划分到同一个作用域中，避免了代码的重复引入，有效减少打包后的代码体积和运行时的内存损耗；

编译性能优化:

升级至最新版本的 webpack，能有效提升编译性能；
使用 dev-server / 模块热替换 (HMR) 提升开发体验；
- 监听文件变动忽略 node_modules 目录能有效提高监听时的编译效率；
缩小编译范围
- modules: 指定模块路径，减少递归搜索；
- mainFields: 指定入口文件描述字段，减少搜索；
- noParse: 避免对非模块化文件的加载；
- includes/exclude: 指定搜索范围/排除不必要的搜索范围；
- alias: 缓存目录，避免重复寻址；
babel-loader
- 忽略node_moudles，避免编译第三方库中已经被编译过的代码
- 使用cacheDirectory，可以缓存编译结果，避免多次重复编译
多进程并发
- webpack-parallel-uglify-plugin: 可多进程并发压缩 js 文件，提高压缩速度；
- HappyPack: 多进程并发文件的 Loader 解析；
第三方库模块缓存:
- DLLPlugin 和 DLLReferencePlugin 可以提前进行打包并缓存，避免每次都重新编译；
使用分析
- Webpack Analyse / webpack-bundle-analyzer 对打包后的文件进行分析，寻找可优化的地方
- 配置profile：true，对各个编译阶段耗时进行监控，寻找耗时最多的地方
source-map:
- 开发: cheap-module-eval-source-map
- 生产: hidden-source-map；