jsliang 求职系列 - 36 - 前端工程化系列总结

一 目录

不折腾的前端，和咸鱼有什么区别

二 复习知识点

本系列参考 79 篇文章，总结出 6 篇文章，感谢小伙伴们的支持。

2.1 Babel

文章地址：Babel

• AST：抽象语法树，是源代码语法结构的一种抽象表示
• 原理：将现有的 ES6+ 代码，先通过 词法分析 和 语法分析 之后 解析 为 AST，然后将这份 AST 转换 为我们需要形式的 AST，最后将这个 AST 再转换成 ES5 或者期望格式的内容。

2.2 Webpack

文章地址：Webpack

• 是什么：本质是一个模块打包器，其工作是将每个模块打包成相应的 bundle
• 核心概念：mode、entry、output、loader、plugin
• 构建流程：初始化、编译、输出，插件（Plugin）随时监听 Webpack 广播并在某些时候调用 API 改变运行结果。
• entry：指定打包⼊口⽂文件。原本是 string，即一个入口对一个打包文件、object 多对一，array 多对多
• output：打包后的文件位置
• loader：翻译官，对不同资源进行处理，从右向左执行
• plugin：插件，扩展 Webpack 的功能，监听 Webpack 的生命周期，调用 API 改变输出结果。
• resolve：配置 Webpack 如何寻找模块所对应的文件。resolve.modules/extensions/include/exclude
• 从 0 开始配置 Webpack
  • 技术选型：移动端|PC、MPA|SPA、HTML|模板引擎、CSS|预处理器、ES5|ES6+、Mock、React|Vue、多人合作|单人项目、ESlint|TSlint、单元测试、提交规范
  • Loader 处理 CSS、Less、Sass
  • Loader 处理图片
  • Loader 处理字体
  • Loader 配置多页面打包（MPA）
  • source map
  • webpack dev server
  • babel
  • react
  • 性能优化
  • 其他：解析器、写 Loader、写 Plugin
• 懒加载
  • 代码分割：code splitting
  • 实现原理：子模块单独打包、借助函数延迟加载
  • Vue 按需加载
• 热更新
  • 开启方式：配置 devServer，添加热更新插件 HotModuleReplacementPlugin
  • 热更新原理
• 3 种 hash：
  • hash：整个项目只要有文件更改，那就变更
  • chunkhash：某个入口对应的 chunk 进行了变更，那就生成新的 hash 值，不会影响其他 chunk
  • contenthash：对应某个文件内容变更了，才会更换这个文件，生成新的 hash，而不会影响同一个模块下其他文件
• source map：将编译、打包、压缩后的代码映射回源代码的过程

2.3 Webpack - Tree Shaking

文章地址：Webpack - Tree Shaking

• Tree Shaking：通过在 package.json 中开启 sideEffects，将 ES6 模板语法的 import 行为导入的文件都标记为无副作用，然后开启 -p 的生产模式，让 Webpack 调用内部的 UglifyJSWebpackPlugin 来进行删除未引用代码。
• dead-code：代码不会被执行，或者执行结果不会被用到，或者代码只会影响死变量的，叫做 dead-code
• 副作用：如果在 import 导入时就会做一些特殊行为的代码，称之为有副作用的代码，例如 polyfill 会影响全局作用域
• 静态分析：ES6 模板语法可以在不执行代码的情况下，从字面量上对代码进行分析。静态分析是 Tree Shaking 的基础。而 require 是需要执行了才知道引用内容的，就不能通过静态分析做优化

2.4 Webpack - Scope Hoisting

文章地址：Webpack - Scope Hoisting

• Scope Hoisting：Webpack3 添加的功能，作用域提升。原理是分析模块的引用关系，将打散的模块合并到同一个函数中，需要 ES6 模板语法进行静态分析

2.5 Webpack 简单实现

文章地址：Webpack 简单实现

• 利用 babel 完成代码转换，并生成单个文件的依赖
• 生成依赖图谱
• 生成最后打包代码

2.6 Webpack 性能优化

文章地址：Webpack 性能优化

• resolve.modules：用于配置 Webpack 去哪些目录下寻找第三方模块（node_modules）
• resolve.extensions：在导入没带文件后缀的路径时，Webpack 会自动带上后缀去尝试询问文件是否存在，而 resolve.extensions 用于配置尝试后缀列表；默认为 extensions:['js', 'json']
• resolve.include/exclude：以 babel-loader 为例，可以通过 include 和 exclude 帮助我们避免 node_modules 这类庞大文件夹]
• 缓存：cache-loader 和 uglifyjs-webpack-plugin，将编译结果写进硬盘缓存，下次文件如果没有变化则直接拉取缓存
• 多进程：Happypack 和 thread-loader，将任务分解成多个子进程去并发执行，提高打包效率
• 多进程压缩：Webpack 自带的 UglifyJSWebpackPlugin 压缩插件是单线程运行的，而 TerserWebpackPlugin 可以并行执行（多线程）
• 静态资源分离：CommonsChunkPlugins 每次构建都会重新构建 vendor，出于效率问题使用 DllPlugin 可以将第三方库单独打包到一个文件中，只有依赖自身发生版本变化才会重新打包
• 打包资源压缩：
  • JS 压缩：UglifyJSWebpackPlugin 和 TerserWebpackPlugin
  • HTML 压缩：HtmlWebpackPlugin
  • CSS 压缩：MiniCssExtractPlugin
  • 图片压缩：ImageWebpackPlugin
  • Gzip 压缩：不包括图片
• Tree Shaking
• Scope Hoisiting
• 按需加载

三 参考文献

本系列参考文献有 79 篇.

3.1 杂

2020：

• 大公司里怎样开发和部署前端代码？【阅读建议：10min】
• 前端高级进阶：前端部署的发展历程【阅读建议：20min】

2019：

• 前端同构渲染的思考与实践【阅读建议：20min】

2018：

• 前端工程师为什么要学习编译原理？【阅读建议：30min】
• 50行代码的MVVM，感受闭包的艺术【阅读建议：10min】
• 不好意思！耽误你的十分钟，让MVVM原理还给你【阅读建议：20min】
• 2018 前端性能优化清单【阅读建议：30min】
• 网页图片加载优化方案【阅读建议：20min】
• 如何优雅处理前端异常【阅读建议：30min】

3.2 Babel

• 一篇文章了解前端开发必须懂的 Babel【阅读建议：10min】
• 不容错过的 Babel7 知识【阅读建议：30min】
• 前端工程师需要了解的 Babel 知识【阅读建议：30min】
• 深入浅出 Babel 上篇：架构和原理 + 实战【阅读建议：30min】
• 深入浅出 Babel 下篇：既生 Plugin 何生 Macros【阅读建议：30min】
• 前端工程师的自我修养-关于 Babel 那些事儿【阅读建议：20min】
• 前端与编译原理——用JS写一个JS解释器【阅读建议：20min】
• 面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒【阅读建议：10min】
• 入门babel--实现一个es6的class转换器【阅读建议：10min】

3.3 模板引擎

• 编写一个简单的JavaScript模板引擎【阅读建议：5min】
• JavaScript模板引擎原理，几行代码的事儿阅读建议：10min】
• Vue 模板编译原理【阅读建议：30min】

3.4 前端监控

• 5 分钟撸一个前端性能监控工具【阅读建议：10min】
• 把前端监控做到极致【阅读建议：10min】
• GMTC 大前端时代前端监控的最佳实践【阅读建议：20min】
• 前端监控和前端埋点方案设计【阅读建议：20min】
• 腾讯CDC团队：前端异常监控解决方案【阅读建议：20min】
• 把前端监控做到极致【阅读建议：10min】

四 Webpack 参考文献

Webpack 系列参考文献有 52 篇文章。

4.1 Webpack 系列文章

其他：

• Webpack 中文文档【阅读建议：无】
• Webpack小书【阅读建议：无】

2020 年文章：

• 「吐血整理」再来一打Webpack面试题【阅读建议：1h】
• 带你深度解锁Webpack系列(基础篇)【阅读建议：1h】
• 带你深度解锁Webpack系列(进阶篇)【阅读建议：30min】
• 带你深度解锁Webpack系列(优化篇)【阅读建议：20min】
• webpack loader 从上手到理解系列：vue-loader【阅读建议：20min】
• webpack loader 从上手到理解系列：style-loader【阅读建议：20min】
• 霖呆呆的webpack之路-loader篇【阅读建议：20min】
• 揭秘webpack plugin【阅读建议：30min】

2019 年文章：

• 关于webpack4的14个知识点,童叟无欺【阅读建议：30min】
• 实现一个简单的webpack【阅读建议：1h】
• 一文掌握Webpack编译流程【阅读建议：1h】
• 前端工程师都得掌握的 webpack Loader【阅读建议：30min】
• 轻松理解webpack热更新原理【阅读建议：1h】
• webpack 中那些最易混淆的 5 个知识点【阅读建议：30min】
• 前端构建秘籍【阅读建议：30min】

2018 年文章：

• 手把手教你撸一个 Webpack Loader【阅读建议：1h】
• 手把手教你撸一个简易的 webpack【阅读建议：30min】
• Webpack揭秘——走向高阶前端的必经之路【阅读建议：30min】
• webpack详解【阅读建议：1h】
• webpack4-用之初体验，一起敲它十一遍【阅读建议：30min】
• 带你走进webpack世界，成为webpack头号玩家。【阅读建议：20min】
• 【webpack进阶】你真的掌握了loader么？- loader十问【阅读建议：20min】
• webpack打包之后的文件过大的解决方法【阅读建议：10min】
• 基于Webpack搭建React开发环境【阅读建议：10min】

2017 文章：

• Webpack 源码（一）—— Tapable 和 事件流【阅读建议：10min】

4.2 Webpack 性能优化

2019 年文章：

• Webpack优化——将你的构建效率提速翻倍【阅读建议：10min】
• 性能优化篇---Webpack构建速度优化【阅读建议：10min】
• 使用webpack4提升180%编译速度【阅读建议：10min】
• 多进程并行压缩代码【阅读建议：5min】
• webpack 4: Code Splitting和chunks切分优化【阅读建议：5min】

2018 年文章：

• Tree-Shaking性能优化实践 - 原理篇【阅读建议：10min】
• 体积减少80%！释放webpack tree-shaking的真正潜力【阅读建议：10min】
• 你的Tree-Shaking并没什么卵用【阅读建议：5min】
• webpack 如何通过作用域分析消除无用代码【阅读建议：5min】
• 让你的Webpack起飞—考拉会员后台Webpack优化实战【阅读建议：5min】
• webpack dllPlugin打包体积和速度优化【阅读建议：5min】
• webpack优化之code splitting【阅读建议：5min】

2017 年文章：

• Webpack 打包优化之速度篇【阅读建议：5min】
• 加速Webpack-缩小文件搜索范围【阅读建议：5min】
• Webpack 大法之 Code Splitting【阅读建议：5min】

4.3 Scope Hoisting

• webpack 的 scope hoisting 是什么？【阅读建议：5min】
• 通过Scope Hoisting优化Webpack输出【阅读建议：5min】
• 【Webpack】654- 了不起的 Webpack Scope Hoisting 学习指南【阅读建议：5min】

4.4 Tree Shaking

• Tree Shaking - Webpack 5.0.0-rc.0【阅读建议：仅供参考】
• Webpack 4 Tree Shaking 终极优化指南【阅读建议：30min】
• Tree-Shaking性能优化实践 - 原理篇 - 2018【阅读建议：仅供参考】
• Webpack4: Tree-shaking 深度解析 - 2019【阅读建议：仅供参考】

4.5 懒加载

• Vue Webpack 打包优化——路由懒加载（按需加载）原理讲解及使用方法说明【阅读建议：20min】
• 懒加载 - Webpack v5.0.0-rc.0【阅读建议：5min】
• webpack的代码分割（路由懒加载同理）【阅读建议：10min】