webpack构建/热更新原理/优化/按需加载实现

webpack构建流程

• Webpack的运行流程是一个串行的过程，从启动到结束依次执行
  1. 初始化参数：从配置文件中读取合并参数，得出最终参数
  2. 开始编译：用最终参数初始化Compiler对象，加载所有配置插件，执行对象的run方法开始执行编译
  3. 确定入口：根据配置中的entry找出所有的入口文件
  4. 编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，通过递归找出该模块依赖的模块，直到所有入口依赖的文件都处理完成
  5. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再转换成一个单独的文件加入到输出列表
  6. 输出完成：根据配置确定输出的路径和文件名，把文件内容写入到文件系统

webpack热更新(HMR)原理

• 第一步，在webpack的watch模式下，webpack会监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码保存在内存中
• 第二步是webpack-dev-server和webpack之间的接口交互，dev-server的中间件middleware调用webpack暴露的API对代码变化进行监控，并且告诉webpack，将代码打包到内存中
• 第三步是webpack-dev-server对文件变化的一个监控，变化后会通知浏览器端对应用进行live reload
• 第四步也是webpack-dev-server代码的工作，该步骤主要是通过sockjs在浏览器端和服务端之间建立一个websocket长连接，将webpack编译打包的状态告知浏览器端，服务端传递的最主要信息是新模块的hash值，后面会根据hash值来进行模块热替换
• webpack-dev-server并不能够请求更新的代码，也不会执行热更模块操作，而把这些工作又交回给了webpack，webpack的工作就是根据客户端传给它的信息以及dev-server的配置决定是刷新浏览器呢还是进行模块热更新。如果仅仅是刷新浏览器，就没有后面的步骤了
• HMR.runtime是客户端HMR的中枢，它接收到传递给他的新模块的hash值，向服务端发送Ajax请求，服务端返回一个json，该json就是更新列表，再次通过请求，获取到最新的模块代码
• HotModulePlugin将会对新旧模块进行对比，决定是否更新模块，如果要更新，检查模块之间的依赖关系，更新模块的同时更新依赖
• 最后，当HMR失败后，回退到live reload操作，也就是进行浏览器刷新来获取最新打包代码

利用webpack来优化前端性能

• 压缩代码，删除多余的代码等。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano来压缩css
• 利用CDN加速，在构建过程中，将引用的静态资源路径修改为CDN上对应的路径，通过webpack对loader的publicPath参数来修改资源路径
• 提取公共代码

vue项目中按需加载实现

• 例如elementUI的babel-plugin-component在.babelrc中配置，即可实现组件按需加载
• 单页应用的按需加载：通过import()语句来控制加载时机，webpack内置了对于import()的解析，会将import()中引入的模块作为一个新的入口生成一个Chunk，当代码执行到import()语句时，会去加载Chunk对应生成的文件