从 npm 和 Webpack 的角度优化构建速度

1.固化npm 包信息       就是在项目中维护一份版本描述文件。可以使用包括 shrinkwrap.json（ npm 5 以下）、package-lock.json（ npm 5）和 yarn.lock（ Yarn ），任何其中一个都可以。版本描述文件中已经记录了依赖包的各种信息，也就不用再重新获取一遍了。在一般的实际工程中，使用了版本描述文件可以使整个 npm install 的过程缩短 10s 以上，这个收益是非常可观的。

2.仓库与镜像    镜像仓库

3.查找臃肿的依赖  检测依赖包的大小的工具

4.打包流程分析和优化 

      打包流程： 

1.             1.依赖处理。从 Webpack 配置中的入口文件开始，逐层进行依赖分析，最终得到整个应用的依赖树。

1.             2.文件编译。每个依赖树中的文件都要根据配置来决定要把它交给哪些 loader 来处理，打包过程中最耗时的地方也就在这。假如说我们工程中有 TypeScript 模块，那就要用对应的 ts-loader 来将其编译为 JavaScript。如果是 SASS，那就用 sass-loader 来编译为 CSS。有时我们还会使用链式的 loader 来对文件进行多步处理。

       优化分析：

                  1.减少不必要的编译过程。

                    2.公共代码与 CommonsChunkPlugin ：可以利用 webpack-bundle-analyzer 这样的工具进行打包结果分析，                         找出体积占比最大的模块。使用 CommonsChunkPlugin 来提取相同模块。

                    3.从动态链接库的思想谈打包。

                    4.利用多进程  Happypack 工具 。

                              Happypack 是一个可以有效利用多进程来编译文件的工具。上面我们已经分析了打包主要分为依赖处理和 文件编译两部分，其实这两部分是在交替进行的。比如工程的入口为 a.js，那么 Webpack 首先把 a.js 交给 loader 去编译。接着由于从 a.js 引用了 b.js 和 c.js，那么这两个 JS 文件也要进行编译。很容易想到 b.js 和 c.js 的编译过程其实是完全独立的两个任务，互相之间没有依赖关系也不在乎顺序。因此可以将它们分别交给不同的进程来处理，并最后将编译的结果传回主进程，这就是 Happypack 的核心思路。