《深入浅出webpack》阅读笔记（四）

四、使用webpack优化开发体验和输出质量

本文主要介绍webpack是如何提升开发效率，优化项目构建效率以及使用体验（自动化手段）的，同时介绍webpack如何实现为用户呈现体验更好的网页（减少用户感知的加载时间，提升流畅度）。

1、优化构建速度

（1）缩小文件的搜索范围

webpack在启动后从entry文件出发，解析文件的导入语句，然后递归解析。根据导入语句寻找对应的要导入的文件，然后根据找到的文件的后缀使用配置中的Loader去处理文件。
当项目较大的时候，文件量会变得非常大，构建速度慢，因此尽量减少上述事件的发生，提高速度。

• 优化loader的配置
  loader对文件的转换操作费时，应尽量减少被loader处理的文件。
  方法：通过include配置项去命中只有哪些文件需要被处理。
• 优化resolve.modules配置
  resolve.modules用于配置Webpack去哪些目录寻找第三方模块。
  方法：当安装的第三方模块都放在项目根目录的./node_modules目录下时，可以指明存放在第三方模块的绝对路径，以减少寻找。
• 优化resolve.mainFields配置
  resolve.mainFields用于配置第三方模块使用哪个入口文件。
• 优化resolve.alias配置
  等等。。。减少文件搜索过程的配置

（2）使用DllPlugin

• dll
  .dll文件为动态链接库，其中可以包含为其他模块调用的函数和数据。
  包含大量复用模板的动态链接库只需要被编译一次，在之后的构建过程中被动态链接库包含的模块将不会被重新编译，而是直接使用动态链接库中的代码。

• 接入Webpack
  webpack内置了对动态链接库的支持，通过以下两个内置插件接入
  DllPlugin插件：用于打包出一个个单独的动态链接库文件
  DllReferencePlugin插件：用于在主要的配置文件中引入DllPlugin插件打包好的动态链接库文件。

（3）使用HappyPack

运行在node.js之上的webpack是单线程模型的，即webpack需要一个一个的处理任务，不能同时处理多个任务。
HappyPack将任务分解给多个子进程去并发执行，子进程处理完后再将结果发送给主进程。
由于JavaScript是单线程模型，所以要发挥多核CPU的功能，只能通过多进程实现，无法通过多线程。
HappyPack做了分解任务和管理线程的事情，我们需要做的是接入HappyPack
（1）在loader配置设置
（2）在Plugin中配置

（4）使用parallelUglifyPlugin

使用webpack构建用于发布在线上的代码时，会有压缩代码的流程，常用的代码压缩工具是UglifyJS，webpack内置了该工具。
压缩JavaScript代码：首先将代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，该过程计算量巨大，耗时较长。
使用parallelUglifyPlugin可以开启多个子进程，将对多个文件的压缩工作分配给多个子进程去完成，每个子进程仍然通过UglifyJS去压缩代码。

（5）使用自动刷新

（1）文件监听
开启文件监听的方法：在配置文件webpack.config.js中设置watch：true；在执行启动Webpack的命令时加上