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

站长

2022年09月17日 19:56 · 阅读数 24

一目录

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

目录
一目录
二复习知识点
2.1 Babel
2.2 Webpack
2.3 Webpack - Tree Shaking
2.4 Webpack - Scope Hoisting
2.5 Webpack 简单实现
2.6 Webpack 性能优化
三参考文献
3.1 杂
3.2 Babel
3.3 模板引擎
3.4 前端监控
四 Webpack 参考文献
4.1 Webpack 系列文章
4.2 Webpack 性能优化
4.3 Scope Hoisting
4.4 Tree Shaking
4.5 懒加载

二复习知识点

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

2.1 Babel

文章地址：Babel

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

2.2 Webpack

文章地址：Webpack

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

2.3 Webpack - Tree Shaking

文章地址：Webpack - Tree Shaking

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

2.4 Webpack - Scope Hoisting

文章地址：Webpack - Scope Hoisting

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

2.5 Webpack 简单实现

文章地址：Webpack 简单实现

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

2.6 Webpack 性能优化

文章地址：Webpack 性能优化

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

三参考文献

本系列参考文献有 79 篇.

3.1 杂

2020：

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

2019：

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

2018：

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

3.2 Babel

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

3.3 模板引擎

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

3.4 前端监控

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

四 Webpack 参考文献

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

4.1 Webpack 系列文章

其他：

[x] Webpack 中文文档【阅读建议：无】
[x] Webpack小书【阅读建议：无】

2020 年文章：

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

2019 年文章：

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

2018 年文章：

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

2017 文章：

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

4.2 Webpack 性能优化