前端工程化的理解简书（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 

 

 

 

 

 

 

。

如果对您有所帮助













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

 


 


 


 


 


 


 
，一起进步              。

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

 
 

 
 

 
 

 
 

 
 

 
 

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

 

 

 

 

 

 
，禁止复制

 
 

 
 

 
 

 
 

 
 

 
 

 
 、盗用













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













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