前端工程化的理解简书（web前端工程化合集）

⾸先要知道server端和client端都做了处理⼯作：

第⼀步 
  
 
  
 
  
 
  
 
  
 
  ，在 webpack 的 watch 模式下











，⽂件系统中某⼀个⽂件发⽣修改 
  
  
  
  
  
，webpack 监听到⽂件变化 
  
  
  
  
  
 ，根据配置⽂

件对模块重新编译打包

 


 


 


 


 


 ，并将打包后的代码通过简单的 JavaScript 对象保存在内存中 
  
  
  
  
  
 。

第⼆步是 webpack-dev-server 和 webpack 之间的接⼝交互 
 
 
 
 
 
，⽽在这⼀步 
   
   
   
   
   
 ，主要是 dev-server 的中间件 webpack- dev-middleware 和 webpack 之间的交互
 

 

 

 

 

 ，webpack-dev-middleware 调⽤ webpack 暴露的 API对代码变化进⾏监 控
 

 

 

 

 

 
，并且告诉 webpack           ，将代码打包到内存中
  
  
  
  
  
 。 第三步是 webpack-dev-server 对⽂件变化的⼀个监控 

 
 

 
 

 
 

 
 

 
 

 ，这⼀步不同于第⼀步











，并不是监控代码变化重新打包
 


 


 


 


 


 
。当我们在配置⽂件中配置了devServer.watchContentBase 为 true 的时候                 ，Server 会监听这些配置⽂件夹中静态⽂件的变化 
 
 
 
 
 
 
 
 
 
 
 ，变化后会通知浏览器端对应⽤进⾏ live reload 
 
 
 
 
 
。注意

















，这⼉是浏览器刷新           ，和 HMR 是两个概念
   
   
   
   
   
  。 第四步也是 webpack-dev-server 代码的⼯作 
  
 
  
 
  
 
  
 
  
 
  ，该步骤主要是通过 sockjs（webpack-dev-server 的依赖）在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接











，将 webpack 编译打包的各个阶段的状态信息告知浏览器端 
  
  
  
  
  
，同时也包括第三步中 Server 监听静态⽂件变化的信息
 

 

 

 

 

 
。浏览器端根据这些 socket 消息进⾏不同的操作 

 

 

 

 

 
。当然服务端传递的最主要信息还是新模块的 hash 值 
  
  
  
  
  
 ，后⾯的步骤根据这⼀ hash 值来进⾏模块热替换            。 webpack-dev-server/client 端并不能够请求更新的代码

 


 


 


 


 


 ，也不会执⾏热更模块操作 
 
 
 
 
 
，⽽把这些⼯作⼜交回给了webpack 
   
   
   
   
   
 ，webpack/hot/dev-server 的⼯作就是根据 webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进⾏模块热更新

 
 

 
 

 
 

 
 

 
 

 
。当然如果仅仅是刷新浏览器
 

 

 

 

 

 ，也就没有后⾯那些步骤了










。 HotModuleReplacement.runtime 是客户端 HMR 的中枢
 

 

 

 

 

 
，它接收到上⼀步传递给他的新模块的 hash 值           ，它通过JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求 

 
 

 
 

 
 

 
 

 
 

 ，服务端返回⼀个 json











，该 json 包含了所有要更新的模块的 hash 值                 ，获取到更新列表后 
 
 
 
 
 
 
 
 
 
 
 ，该模块再次通过 jsonp 请求

















，获取到最新的模块代码                  。这就是上图中 7 
  
  
  
  
  
 、8
  
  
  
  
  
 、9 步骤
 
 
 
 
 
 
 
 
 
 
 
。 ⽽第 10 步是决定 HMR 成功与否的关键步骤           ，在该步骤中 
  
 
  
 
  
 
  
 
  
 
  ，HotModulePlugin 将会对新旧模块进⾏对⽐











，决定是否更新模块 
  
  
  
  
  
，在决定更新模块后 
  
  
  
  
  
 ，检查模块之间的依赖关系

 


 


 


 


 


 ，更新模块的同时更新模块间的依赖引⽤
















。 最后⼀步 
 
 
 
 
 
，当 HMR 失败后 
   
   
   
   
   
 ，回退到 live reload 操作
 

 

 

 

 

 ，也就是进⾏浏览器刷新来获取最新打包代码            。

10. 如何⽤webpack来优化前端性能？

⽤webpack优化前端性能是指优化webpack的输出结果
 

 

 

 

 

 
，让打包的最终结果在浏览器运⾏快速⾼效
  
 
  
 
  
 
  
 
  
 
  
。

压缩代码：删除多余的代码
 


 


 


 


 


 
、注释 
 
 
 
 
 
、简化代码的写法等等⽅式










。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件           ， 利⽤ cssnano （css-loader?minimize）来压缩css 利⽤CDN加速: 在构建过程中 

 
 

 
 

 
 

 
 

 
 

 ，将引⽤的静态资源路径修改为CDN上对应的路径 
  
  
  
  
  
 。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径 Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉
  
  
  
  
  
 。可以通过在启动webpack时追加参数 --optimize-minimize 来实现 Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存 提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

11. 如何提⾼webpack的打包速度?

happypack: 利⽤进程并⾏编译loader,利⽤缓存来使得 rebuild 更快,遗憾的是作者表示已经不会继续开发此项⽬,类似的替代者是thread-loader 外部扩展(externals): 将不怎么需要更新的第三⽅库脱离webpack打包











，不被打⼊bundle中                 ，从⽽减少打包时间 
 
 
 
 
 
 
 
 
 
 
 ，⽐如jQuery⽤script标签引⼊ dll: 采⽤webpack的 DllPlugin 和 DllReferencePlugin 引⼊dll

















，让⼀些基本不会改动的代码先打包成静态资源           ，避免反复编译浪费时间 利⽤缓存: webpack.cache 
   
   
   
   
   
  、babel-loader.cacheDirectory
 

 

 

 

 

 
、 HappyPack.cache 都可以利⽤缓存提⾼rebuild效率缩⼩⽂件搜索范围: ⽐如babel-loader插件,如果你的⽂件仅存在于src中,那么可以 include: path.resolve(__dirname,src) ,当然绝⼤多数情况下这种操作的提升有限 
  
 
  
 
  
 
  
 
  
 
  ，除⾮不⼩⼼build了node_modules⽂件

12. 如何提⾼webpack的构建速度？

多⼊⼝情况下











，使⽤ CommonsChunkPlugin 来提取公共代码 通过 externals 配置来提取常⽤库 利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译 
  
  
  
  
  
，再通过 DllReferencePlugin 将预编译的模块加载进来
 


 


 


 


 


 
。 使⽤ Happypack 实现多线程加速编译 使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度 
 
 
 
 
 
。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度 使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码

13. 怎么配置单⻚应⽤？怎么配置多⻚应⽤？

单⻚应⽤可以理解为webpack的标准模式 
  
  
  
  
  
 ，直接在 entry 中指定单⻚应⽤的⼊⼝即可

 


 


 


 


 


 ，这⾥不再赘述多⻚应⽤的话 
 
 
 
 
 
，可以使⽤webpack的 AutoWebPlugin 来完成简单⾃动化的构建 
   
   
   
   
   
 ，但是前提是项⽬的⽬录结构必须遵守他预设的规范
   
   
   
   
   
  。 多⻚应⽤中要注意的是：

每个⻚⾯都有公共的代码
 

 

 

 

 

 ，可以将这些代码抽离出来
 

 

 

 

 

 
，避免重复的加载
 

 

 

 

 

 
。⽐如           ，每个⻚⾯都引⽤了同⼀套css样式表 随着业务的不断扩展 

 
 

 
 

 
 

 
 

 
 

 ，⻚⾯可能会不断的追加











，所以⼀定要让⼊⼝的配置⾜够灵活                 ，避免每次添加新⻚⾯还需要修改构建配置

三 

 

 

 

 

 
、其他

1. Babel的原理是什么?

babel 的转译过程也分为三个阶段 
 
 
 
 
 
 
 
 
 
 
 ，这三步具体是：

解析 Parse: 将代码解析⽣成抽象语法树（AST）

















，即词法分析与语法分析的过程； 转换 Transform: 对于 AST 进⾏变换⼀系列的操作           ，babel 接受得到 AST 并通过 babel-traverse 对其进⾏遍历 
  
 
  
 
  
 
  
 
  
 
  ，在此过程中进⾏添加            、更新及移除等操作； ⽣成 Generate: 将变换后的 AST 再转换为 JS 代码, 使⽤到的模块是 babel-generator 

 

 

 

 

 
。

如果对您有所帮助











，欢迎您点个关注 
  
  
  
  
  
，我会定时更新技术文档 
  
  
  
  
  
 ，大家一起讨论学习

 


 


 


 


 


 ，一起进步            。

声明：本站所有文章 
 
 
 
 
 
，如无特殊说明或标注 
   
   
   
   
   
 ，均为本站原创发布

 
 

 
 

 
 

 
 

 
 

 
。任何个人或组织
 

 

 

 

 

 ，在未征得本站同意时
 

 

 

 

 

 
，禁止复制

 
 

 
 

 
 

 
 

 
 

 
、盗用










、采集                  、发布本站内容到任何网站
 
 
 
 
 
 
 
 
 
 
 
、书籍等各类媒体平台










。如若本站内容侵犯了原著者的合法权益           ，可联系我们进行处理                  。