WebPack

编译流程

• 创建Compiler编译对象
• 初始化入口，解析入口文件，构建依赖树
• 确定编译环境
• 初始化内部解析
• 开始对文件进行编译
• 对每个模块创建Compilation，Compilation会对依赖树的模块进行编译，可以在编译期间被加载、封存、优化、分块、重新创建
• 编译结束
• 输出文件
• 编译完成

编译优化

优化分析

• 体积分析：webpack-bundle-analyzer
• 速度分析：speed-measure-webpack-plugin
• 日志分析：webpack —status

优化方案

• 使用dllPlugin
• babel-loader添加cacheDirectory
• 使用thread-loader优化loader
• 使用高版本node和webpack
• 开启tree shaking和scope hoisting
• webpack5配置长缓存
• 使用css-minimizer-webpack-plugin压缩css
• 使用terser-webpack-plugin压缩js，并去掉无用的js
• webpack5的module-federation
• split chunks 分包

HMR

• webpack-dev-server在启动的时候会给entry去注入webpack/hot/dev-server
• 注入webpack-dev-server/client/index.js
• 判断是否存在webpack.HotModuleReplacementPlugin（作用：这个插件会注入一个module.hot的一个对象，该对象提供了一些方法，用于更新）
• 监听webpack hooks的compile（编译）、done（编译成功）、invalid（编译失败）钩子
• 初始化express、webpack-dev-middleware
• 启动express、socket服务

  📌socket服务主要是用于监听一些特定的事件进行更新处理

• webpack-dev-middleware会以watch的形式监听文件更改，当文件发生变化的时候，会生成xxx.hot-update.js（当前的文件）和xxx.hot-update.json（下次更改的hash），调用location.reload