416_前端工程化精讲
//合并文档ds script
4357 || 已发布 || 开篇词 | 建立上帝视角，全面系统掌握前端效率工程化 || d6b0ec03a4374536a361909923c61bee
从事前端开发十余年
曾先后在多家大型互联网公司从事前端架构工作
讲师：李思嘉
贝壳找房前端架构组任资深工程师，专注于前端通用构建平台，前端开发工具生态的服务建设
为什么要学习前端效率工程化
一个中高级前端工程师
完成业务功能开发目标
对所开发项目的效率、性能、质量等工程化维度去制定和实施技术优化目标
以提升效率为目标的优化技术和工具属于效率工程化的范畴
为什么要学习前端效率工程化
效率提升通常会被作为技术层面的一个重点优化方向面试中，对效率工程化的理解程度和实践中的优化产出情况是衡量前端工程师能力高低的常见标准
为什么要学习前端效率工程化
投身在业务开发中的前端同学，在效率工程化方面经常面临的困扰：缺乏系统化知识，对于项目中的效率问题常常不知从何处着手，甚至找错解决方向
缺少工程化的视野，难以发现工作中的效率提升点和制定针对性的提升方案技术晋升和面试求职中，缺少方法论和深度思考，很难在能力表现上脱颖而出
为什么要学习前端效率工程化
拉勾教
互联网人实战大
找到自己的短板来做针对性提升
全面、系统地掌握效率的影响因素以及其中的技术细节
《前端工程化精讲：从思路到实战》课程大纲开篇词|建立上帝视角，全面系统掌握前端效率工程化第一部分：开发效率
项目基石：前端脚手架工具探秘界面调试：热更新技术如何开着飞机修引擎？
构建提速：如何正确使用 SourceMap？接口调试：Mock工具如何快速进行接口调试？
编码效率：如何提高编写代码的效率？
团队工具：如何利用云开发提升团队开发效率？
低代码工具：如何用更少的代码实现更灵活的需求？
无代码工具：如何做到不写代码就能高效交付？
第二部分：构建效率构建总览：前端构建工具的演进9流程分解：Webpack的完整构建流程编译提效：如何为Webpack编译阶段提速?11打包提效：如何为Webpack 打包阶段提速?12国缓存优化：那些基于缓存的优化方案增量构建：Webpack 中的增量构建14四版本特性：Webpack 5中的优化细节无包构建：盘点那些No-bundle的构建方案16第三部分：部署效率部署初探：为什么一般不在开发环境下部署代码?17工具盘点：掌握那些流行的代码部署工具18
第三部分：部署效率部署初探：为什么一般不在开发环境下部署代码?17工具盘点：掌握那些流行的代码部署工具18安装提效：部署流程中的依赖安装效率优化19流程优化：部署流程中的构建流程策略优化20容器方案：从构建到部署，容器化方案的优势有哪些?21案例分析：搭建基本的前端高效部署系统22结束语|前端效率工程化的未来展望
你将获得·全面、系统的效率工程化知识体系·对实际项目输出针对性优化方案的能力·丰富的实战经验分享·面试 Offer 收割利器
4415 || 已发布 || 01 | 项目基石：前端脚手架工具探秘 || ccd8c36a2c9a4c818065ca8bd53e6826
v
项目基石：前端脚手架工具探秘
前端效率工程化这门课会讨论
一个前端项目从开发到构建和部署这一系列工作流程的效率问题
开发效率篇
讨论一系列影响开发效率的流程和工具
项目基石：前端脚手架工具探秘
拉勾
互联网
当你准备开发一个新项目时，在进入到实际业务编码前，会遇到的问题：准备好一个项目的基础开发设施，需要投入大量时间和精力较短时间内配置一个技术栈完整、辅助功能丰富、兼顾不同环境下构建优化目标的项目基础代码需要开发人员在工程领域长久的知识储备与实践总结不同的项目需求和团队情况，需要根据不同的现状使用不同的基础设施
脚手架工具
利用脚手架工具，可以经过几个简单的选项快速生成项目的基础代码使用脚手架工具生成的项目模板通常是经过经验丰富的开发者提炼和检验的脚手架工具支持使用自定义模板，可以根据项目中的实际经验总结、定制一个脚手架模
前端工程师要掌握的基本能力
通过技术选型来确定所需要使用的技术栈然后根据技术栈选择合适的脚手架工具，来做项目代码的初始化
进入开发需要做的准备
拉
互朝
1.需要有package.json，它是npm依赖管理体系下的基础配置文件
2.然择使用 npm 或 Yarn 作为包管理器3，确定项目技术栈，在明确选择后安装相关依赖包并在src目录中建立入口源码文件4，选择构建工具，主流选择是webpack（除非项目已先锋性地考虑尝试nobundle方案）
对应项目里需要增加相关的webpack配置文件，可以考虑针对开发/生产环境使用不同配置文件
进入开发需要做的准备
拉
5，打通构建流程，安装与配置各种Loader、插件和其他配置项6，优化构建流程，针对开发/生产环境的不同特点进行各自优化7，选择和调试辅助工具，例如代码检查工具和单元测试工具，安装相应依赖并调试配置文件8，检查各主要环节的脚本是否工作正常，编写说明文档README.md不需要纳入版本管理的文件目录记入.gitignore等
Yeoman 由 Google I/0 在 2012 年首次发布 功能：基于特定生成器（Generator）来创建项目基础代码
它提供足够的开放性和自由度
但缺乏某一技术栈的深度集成和技术生态
Yeoman 更多用于一些开发流程里特定片段代码的生成
Create React App（简称 CRA）是 Facebook 官方提供的 React 开发工具集
react-scripts 提供了封装后的项目启动、编译、测试等基础工具
create-react-app 用于选择脚手架创建项目
Vue CLI 保留了创建项目开箱即用的优点
提供了用于覆盖修改原有配置的自定义构建配置文件和其他工具配置文件
Vue CLI 提供了通过用户交互自行选择的一些定制化选项
例如是否集成路由、TypeScript等
Yeoman 代表一般开源工具的理念
它专注于实现脚手架生成器的逻辑和提供展示第三方生成器，主要目标群体是生成器的开发者它提供一个包含各开发工具的集成工具集和标准化的开发-构建-测试三步流程脚本Vue CLI 代表更灵活折中的理念
CRA 代表面向某一技术栈降低开发复杂度的理念继承了 CRA 降低配置复杂度的优点
在创建项目的过程中提供更多交互式选项来配置技术栈的细节，允许在项目中使用自定义配置
了解脚手架模板中的技术细节
对脚手架足够熟悉，能减少花费的时间，提升开发效率
要了解一个脚手架，需要学会如何使用脚手架来创建项目还需要了解它提供的具体功能边界，提供了哪些功能、哪些优化除了通过脚手架模板生成项目外
项目内部分别使用react-scripts和vue-cli-service作为开发流程的集成工具
webpack.optimize两者在代码优化配置中相同的部分包括：
都使用TerserPlugin压缩JavaScript，都使用splitChunks做自动分包（参数不同）
CSS的压缩分别采用OptimizeCssAssetsWebpackPlugin和OptimizeCssNanoPlugin
在resolve和resolve loader部分
两者都使用PnpWebpackPlugin（pnp）
来加速使用 Yarn 作为包管理器时的模块安装和解析
如何定制一个脚手架模板
对通过这些脚手架创建的模板项目进行定制化，例如：
1.为项目引入新的通用特性
2，针对构建环节的webpack配置优化，来提升开发环境的效率和生产环境的性能等3，定制符合团队内部规范的代码检测规则配置
4，定制单元测试等辅助工具模块的配置项
如何定制一个脚手架模板
通过将实际项目开发中所需要做的定制化修改输出为标准的脚手架模板
最大程度减少大家在开发中处理重复事务的时间
减少因为开发风格不一导致的团队内项目维护成本的增加
使用 Yeoman 创建生成器
拉勾教
互联间人实战大
一个基本的复制已有项目模板的生成器包含了：
1，生成器描述文件package.json，其中限定了name，file，keywords等对应字段的规范赋值2，作为主体的generators/app目录，包含生成器的核心文件。该目录是执行yo命令时的默认查找目录
3.app/index.js 是生成器的核心控制模块，其内容是导出一个继承自 yeoman-generator 的类并由后者提供运行时上下文、用户交互、生成器组合等功能
4，app/templates/目录是复制到新项目中的脚手架模板目录
cli + template
4416 || 已发布 || 02 | 界面调试：热更新技术如何开着飞机修引擎？ || bdd4c05546bb4caeba17c2bd8f403b30
界面调试：热更新技术如何开着飞机修引擎？
上一课时
讲解了几个典型脚手架的特点和使用思考题：在实际项目里使用的是哪一类脚手架工具以及使用的理由本课时
讲解前端开发过程中一个经典的提高开发效率的技术：浏览器的热更新
什么是浏览器的热更新
拉勾
五联间人
看见浏览器热更新，很容易想到webpack和 webpack-dev-server简单地执行 npm start（cra）或 npm run serve（vue cli），就能体验到热更新的效果
什么是浏览器的热更新
热更新是保存后自动编译（Auto Compile）吗？
还是自动刷新浏览器（Live Reload）？
还是指 HMR（Hot Module Replacement，模块热替换）？
这些不同的效果背后的技术原理是什么呢？
什么是浏览器的热更新
拉
一丘
浏览器的热更新，指的是：
在本地开发的同时打开浏览器进行预览，当代码文件发生变化时，浏览器自动更新页面内容的技术自动更，表现上分为：
自动刷新整个页面
页面整体无刷新而只更新页面的部分内容
webpack 中的热更新配置
拉勾教
互联网人实战大
以webpack工具为例，来看下四种不同配置对结果的影响
完整示例代码https://github.com/fe-efficiency/lessons_fe_efficiency/02_webpack_hmr
Watch 模式
为了看到执行效果，需要在浏览器中进行预览但在预览时会发现，即使产物文件发生了变化在浏览器里依然需要手动点击刷新才能看到变更后的效果
Live Reload
用ws监听更新
Hot Module Replacement 可以开启配置
为什么不像上一个例子中那样改动 JS 的内容
（例如改动显示的文本）来观察热替换的效果呢
简单改动 JS 中的显示文本并不能达到热替换的效果
webpack 中的热更新原理
可以基于Node.js中提供的文件模块fs.watch来实现对文件和文件夹的监控
也可以使用sockjs-node或socket.io来实现Websocket的通信
webpack 中的打包流程
module：指在模块化编程中我们把应用程序分割成的独立功能的代码模块chunk：指模块间按照引用关系组合成的代码块，一个 chunk 中可以包含多个 module
·chunk group：指通过配置入口点（entry point）区分的块组
一个 chunk group 中可包含一到多个 chunk
bundling：webpack 打包的过程
asset/bundle：打包产物
webpack 中的打包流程
经过 style-loader 处理的 style.css 模块的代码
style-loader 中的热替换代码
hot.accept方法传入依赖模块名称和回调方法
hot.dispose方法是传入一个回调
模块热替换插件（HotModuleReplacementPlugin）
为什么替换 index1.js 中的输出文本内容时并没有观察到热更新，而是看到了整个页面的刷新代码中并未包含对热替换插件 API 的调用代码的解析也没有配置额外能对特定代码调用热替换 API的 Loader
示例：JS 代码中的热替换
热替换的实现
既依赖 webpack 核心代码中HotModuleReplacementPlugin 所提供的相关 API
也依赖在具体模块的加载器中实现相应API的更新替换逻辑
vue-loader、react-hot-loader 等加载器也都实现了该功能
4417 || 已发布 || 03 | 构建提速：如何正确使用 SourceMap？ || ba81036d155147b9bcf5a60ab2ae7652
构建提速：如何正确使用SourceMap？
上一课时
讲解了开发时的热更新机制和其中的技术细节
课后留的思考题——找一个实现了 HMR 的Loader，查看其中用到哪些热替换的API
什么是 Source Map source-map的基本原理，在编译处理的过程中在生成产物代码的同时生成产物代码中被转换的部分与源代码中相应部分的映射关系表
通过Chrome控制台中的"Enable Javascript source map"来实现调试时的显示与定位源代码功能
什么是 Source Map拉五
对于同一个源文件，根据不同的目标，可以生成不同效果的source map在构建速度、质量（反解代码与源代码的接近程度以及调试时行号列号等辅助信息的对应情况）访问方式（在产物文件中或是单独生成source map文件）和文件大小等方面各不相同
什么是 Source Map对于 source map 功能的期望不同：在开发环境中，通常关注的是构建速度快，质量高，以便于提升开发效率在生产环境中，通常更关注是否需要提供线上 source map生成的文件大小和访问方式是否会对页面性能造成影响等，其次才是质量和构建速度
webpack 中的 source map 预设
Source Map 名称关键字
false：不开启 source map 功能，其他不符合上述规则的赋值也等价于 false
eval：在编译器中使用 EvalDevToolModulePlugin 作为 sourcemap 的处理插件
[xxx-...]source-map：根据 devtool 对应值中是否有 eval 关键字来决定使用
EvalSourceMapDevToolPlugin或SourceMapDevToolPlugin作为sourcemap的处理插件
其余关键字则决定传入到插件的相关字段赋值
inline：决定是否传入插件的filename参数，作用是决定单独生成source map文件还是在行内显示该参数在 eval-参数存在时无效
hidden：决定传入插件 append的赋值，作用是判断是否添加 SourceMappingURL 的注释该参数在 eval-参数存在时无效
Source Map 名称关键字
拉勾
五联网
module：为 true 时传入插件的 module 为 true，作用是为加载器（Loaders）生成 source map cheap：当 module为 false 时，它决定插件 module 参数的最终取值，最终取值与 cheap 相反决定插件columns参数的取值，作用是决定生成的 source map中是否包含列信息在不包含列信息的情况下，调试时只能定位到指定代码所在的行
Source Map 名称关键字
拉勾教
互联网人实版
module：为 true 时传入插件的 module 为 true，作用是为加载器（Loaders）生成 source map cheap：当 module为false时，它决定插件 module参数的最终取值，最终取值与 cheap 相反决定插件columns参数的取值，作用是决定生成的 source map中是否包含列信息在不包含列信息的情况下，调试时只能定位到指定代码所在的行
nosource：决定插件中 noSource变量的取值，作用是决定生成的 source map中是否包含源代码信息不包含源码情况下只能显示调用堆栈信息
Source Map 处理插件
EvalDevToolModulePlugin：模块代码后添加 sourceURL=webpack:///+ 模块引用路径不生成 source map 内容，模块产物代码通过 eval（）封装
EvalSourceMapDevToolPlugin：生成 base64 格式的 source map 并附加在模块代码之后source map后添加sourceURL=webpack:///+模块引用路径，模块产物代码通过eval（）封装
SourceMapDevToolPlugin：生成单独的.map 文件，模块产物代码不通过 eval封装
Source Map 处理插件
不同参数组合下的各种预设对source map生成
又各自会产生什么样的效果呢
不同预设的效果总结
包的大小和生成方式
需要关注速度和质量来保证高效开发体验
其他的部分则是在生产环境下需要考虑的问题
不同预设的效果总结
拉勾
互联网人实构建的速度
在开发环境下：一直开着 devServer，再次构建的速度对效率影响远大于初次构建的速度eval-对应的EvalSourceMapDevToolPlugin整体要快于不带 eval-的SourceMapDevToolPlugin在生产环境下：通常不会开启再次构建，初次构建的速度更值得关注
对构建速度以外因素的考虑要优先于对构建速度的考虑
不同预设的效果总结
质量
对应的调试便捷性依次降低：
源代码>缺少列信息的源代码> loader转换后的代码>生成后的产物代码>无法显示代码
对应对质量产生影响的预设关键字优先级：
souce-map = eval-source-map > cheap-module-> cheap-> eval = none > nosource-
开发环境下Source Map推荐预设
开发环境首选哪一种预设取决于 source map 对于我们的帮助程度如果对项目代码了如指掌，可以关闭 devtool 或使用 eval 来获得最快构建速度如果在调试时，需要通过 source map 来快速定位到源代码优先考虑使用eval-cheap-modulesource-map，它的质量与初次/再次构建速度都属于次优级a
根据对质量要求更高或是对速度要求更高的不同情况
可以分别考虑使用eval-source-map或eval-cheap-source-map
几种工具和脚手架中的默认预设
webpack配置中，默认值eval，模块代码后多了sourceURL以帮助定位模块的文件名称create-react-app 中
生产环境下，根据shouldUseSourceMap参数决定使用'source-map'或false开发环境下，使用'cheap-module-source-map'（不包含列信息的源代码，但更快）
vue-cli-service 中，与 creat-react-app 中相同
EvalSourceMapDevToolPlugin的使用
EvalSourceMapDevToolPlugin 的传入参数
预设相关的filename、append、module、columns
EvalSourceMapDevToolPlugin的传入参数·预设相关的filename、append、module、columns·影响注释内容的moduleFilenameTemplate和protocol·影响处理范围的test、include、exclude
总结·生成的source map的内容，即浏览器工具是如何将source map内容映射回源文件的http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html·在控制台的网络面板中通常看不到source map文件的请求，需要通过 net-log来查询chrome://net-export/
什么是Mock?在前端开发流程中在程序设计中指模拟数据（俗称假数据）以及生成和使用模拟数据的使用模拟（Mock）的对象来替代真实对象工具与流程以测试其他对象的行为
什么是Mock?前端开发时间t1，后端开发时间t2，前后端联调时间t3整体的项目开发时间是<=max(t1，t2)+t3将整个开发流程按功能点进行更细粒度地拆分
什么是Mock?前端需要依赖一定的数据模型来组织页面与组件中的交互流程数模型依赖着后端提供的API接口
什么是Mock?假设在后端实际API功能完成之前能获得对应的模拟数据作为接口的返回值来处理前端交互中的数据模型待开发完成进入联调后将假数据的部分切换到真实的后端服务接口数据
选择Mock方案的考量标准拉勾教育互联间人实战大学直接在代码中侵入式地书写静态返回数据来调试相使用后端开发服务作为Mock服务，将未实现的功能在后端返回Mock数据关逻辑通过一些本地Mock工具，使用项目本地化的Mock规则文件来生成Mock数据
使用功能更丰富的接口管理工具来提供独立的Mock能力
选择Mock方案的考量标准仿真度：Mock数据需要在接口定义上尽可能与后端实际提供接口的各方面保持一致数据定义的仿真度是决定实际模拟过程效率和质量的首要因素通常在开发初期通过接口文档的方式来提供，或由提供类似功能的Mock工具来提供
选择Mock方案的考量标准易用性：高效的Mock工具需要具备将接口文档自动转换为Mock接口的能力当接口发生变化时会首先更新到文档中，并自动反映到提供的Mock数据中后端提供的真实服务应当完整通过Mock接口的测试
灵活性：实际的接口调用中会根据不同的调用方式与传入参数等条件来输出不同的返回值前端根据不同条件下返回值的差异做不同的交互处理
Mock.jsMock.js的核心能力是定义了两类生成模拟数据的规范，以及实现了应用相应规范生成模拟数据的方法· 数据模板定义规范（Data Template Definition,DTD）· 数据占位符定义规范（Data Placeholder Definition,DPD）
数据模板定义规范(DTD)Mock.mock({"number|1-100": 1リ//Result:number为1-100内随机数，例如{number:73}Mock.mock({"boo|1-100": trueリ//Result:boo为true或false,其中true的概率为1%,例如{boo:false}Mock.mock({"str/1-100": '1'リ//Result:str为1-100个随机长度的字符串'1'。例如{str:'11111'}
数据占位符定义规范(DPD)占位符既可以用于单独返回指定类型的随机数据，又能结合数据模板作为模板中属性值的部分来生成更复杂的数据类型Mock.js中定义了9大类共42种占位符
其他功能拉数据验证Mock.valid 方法验证指定数据和数据模板是否匹配Ajax请求拦截模板导出用于验证后端API接口的返回值与对应Mock数据的规Mock.toJSONSchemaMock.mock方法中支持传入Ajax请求的url和type则描述是否冲突用于将数据模板导入到支持JSON Schema格式的Mock.setup 方法设置拦截工具中Ajax请求后的响应时间
faker.js mock.js yapi Apifox
Faker.js本地植入模拟数据生成器的方式从整体前后端工作的效率而言，并非最佳选择：1.数据模板和TypeScript类型需要通过人工来保持一致，缺乏自动检验的功能2.仍然需要后端编写完整的接口文档后才能开始编写数据生成逻辑3.本地模拟数据规则本质上和接口文档脱离
拉Apifox解决了接口定义与Mock数据脱离的问题：1.在接口定义阶段，支持后端服务内定义的OPENAPI风格的接口定义数据直接导入生成接口文档也支持在工具界面内填写字段创建，创建时支持设定返回值的 Mock描述2.在接口定义完成后，即可直接访问工具提供的Mock服务接口供前端调用3.在后端接口开发过程中，可通过工具提供的接口调试功能进行开发调试4.在接口完成后的任意时间点，支持接口的自动化测试来保证功能与描述的一致性
4418 || 已发布 || 04 | 接口调试：Mock 工具如何快速进行接口调试？ || 3ba4a360e5b44df7b9842461de59f5f5
编码效率：如何提高编写代码的效率？ || 67e286118eb34381afe307c03772b235
提高编码效率的不同方式通过脚手架生成一个项目的基础代码，免去了投入其中的时间
预处理语言代码生成通过对应的预处理器将预处理语言在编译时转换为更完以达到在编写时自动生成代码的作用整的普通语法代码
使用预处理语言和预处理器预处理语言在原有语言的语法基础上提供更多新的内置功能及精简语法以便提高代码复用性和书写效率
Sass / Less / StylusSass(2006)，Less(2009)和Stylus(2010)是三种目前主流的CSS预处理语言
是三种目前主流的CSS预处理语言·react-scripts集成了sass-loader,vue-cli-service同时支持这三种预处理器·Bootstrap4、Antd和iView使用Less，ElementUI使用Sass
Sass / Less / Stylus三种CSS的预处理语言都实现了变量(Variables)、嵌套(Nesting)、混合(Mixins)、运算(Operators)父选择器引用(Parent Reference)、扩展(Extend)和大量内建函数(Build-in Functions)·Less缺少自定义函数的功能（可以使用Mixins结合Guard实现类似效果）·Stylus更有利于编写复杂的计算函数
Sass / Less / Stylus拉·Sass有两种npm编译安装包，基于LibSass的node-sass和基于dart-sass的Sass·使用webpack构建，三种语言对应的预处理器是sass-loader、less-loader、stylus-loader注意：sass-loader和stylus-loader安装时需要同时安装独立编译包Sass/node-sass和Stylussass-loader处理partial文件中的资源路径时需要增加resolve-url-loader
sass-loader处理partial文件中的资源路径时需要增加resolve-url-loader（以及sass-loader中需要开启sourceMap参数）以避免编译时的报错stylus-loader需要增加“resolve url”参数
PugPug的前身名叫Jade(2010)
PugPug支持迭代(Iteration)、条件(Condition)、扩展(Extend)包含(Include)、混合（Mixins)等逻辑功能Vue文件的template支持添加lang="pug"在vue-cli-service的webpack配置中,内置了pug-loader作为预处理器
在React开发中，通过babel插件获得支持
具有精简语法功能的有——对应JavaScript的CoffeeScript和对应JSON的YAML等YAML语言目前主要在一些配置上使用例如 Dockerfile 和一些持续集成工具（CI)的配置文件
使用代码生成工具使用IDE(Integrated Development Environment,集成开发环境）的相关预设功能帮助生成代码
功能主要包括：智能帮助、Snippet 和Emmet 在IDE 中会默认内置一些智能帮助功能
例如输入时的联想匹配、自动完成、类型提示、语法检查等
上述工具的一般使用建议——HtmlHtml语言作为一个组件的模板存在组件模板中通常由框架提供了数据注入(Interpolation)以及循环、条件等语法组件化本身解决了包含、混入等代码复用的问题
上述工具的一般使用建议—-JavaScript / TypeScriptJS/ TS的开发过程是非结构化的，提效工具主要是使用Snippet第三方扩展提供的常用语句的缩写，结合开发者自定义的常用片段，再次提升编码效率
4420 || 已发布 || 06 | 团队工具：如何利用云开发提升团队开发效率？ || d9a4176d4fc14a968e7646b15f90c7c4
云开发（Cloud Development）
软件开发环境的对比——远程开发将开发环境部署到远程服务器，通过个人电脑的IDE （IntegratedDevelopment Environment,集成开发环境），进行远程连接来进行开发的方式
云开发拉简化使用流程提升开发环境准备的效率有利于资源利用率的提升和硬件资产成本的降低提升团队协作效率
使用云开发的注意点拉服务搭建与维护·对于大厂，搭建自维护的云开发服务服务降级与备份代码安全问题·对于中小规模的技术团队，购买使用一些支持内部部署的现有云开发服务在代码仓库中设置具体项目的访问权限云开发模式下将开发环境与工作代码都存储于云端，需要考虑当云端服务异常时的降级策略·在使用云开发模式时应当首选支持内部部署的云服务或搭建自维护的云服务
低代码工具：如何用更少的代码实现更灵活的需求？ || 7bd5e994e53342e5987a015411ada2e7
什么是低代码开发低代码开发低代码开发平台(Low-Code(Low-Code DevelopmentDevelopment Platform简称LCDP)简称LCD)低代码开发模式的开发者，通过平台的功能和约束来实现专业代码的产出开发者主要通过图形化用户界面和配置来创建应用软件
编写JSON开发的缺点拉勾互联网输入效率学习记忆成本问题排查难度增加复用性和可维护性
可视化操作平台的生产效率影响因素编写JSON的产出效率更大程度上取决于编写页面的开发者的技术熟练度平台提供的交互易用性决定了用户的产出效率平台的逻辑自洽性决定了用户产出的质量平台的功能完备性直接决定了用户产出的上限
低代码开发的产品·商用的产品，例如Kony、OutSystems、Mendix、Appian、iVX（国内）等·开源类的产品，例如阿里飞冰、百度Amis、贝壳河图、Vvvebjs、react-visual-editor等
无代码开发模式的出现拉勾教育互联网人实战大学项目流程模式基本相同但又具有一定的定制性需求量大且更新频率快的小型项目开发人员成本昂贵，供不应求非互联网企业缺少技术资源
无代码开发介绍无代码开发(No-Code Development / Codeless Development)指通过非手写代码工具来产出代码的方式无代码开发平台(No-Code Development Platform, NCDP)
企业内部的定制化搭建平台拉勾教育互联间人实战大学设计师设计页面，交付设计稿前端工程师开发活动的前端代码23产品确定活动流程，交付产后端工程师开发活动的后端代码14品文档与原型65S测试通过后部署上线前后端联调后交付测试
4422 || 已发布 || 08 | 无代码工具：如何做到不写代码就能高效交付？ || d37d9da8befc4f1aa6bcdc8558013c02
4423 || 已发布 || 09 | 构建总览：前端构建工具的演进 || d394c951b81947169b823f9674bd3c51
文件压缩与合并工具拉在合并工具方面文件压缩工具CSS Sprite技术解决了网页中大量素材图片的加载性能问题。代码文件的合并，可以在命令行中通过输出到文件手动完成；在从JSMin、YUI Compressor 到ClosureCompiler和UglifyJS,压缩与优化的性能不断完善Closure Compiler 工具中包含了将多个文件合并为一个的参数
任务式构建工具Grunt 和 Gulp 两种任务式的构建工具的基本组成
拉勾教育Grunt vs Gulp互联网人实战大学读写在读写速度上Gulp要快于Grunt速度Gulp周下载量为1,200,000+,约是Grunt的两社区使倍。Grunt 社区提供超过6000个不同功能的插用规模件，Gulp社区插件数量是4000多个
模块化的不同规范——UMDUMD本质上是兼容CommonJS与 AMD这两种规范的代码语法糖通过判断执行上下文中是否包含 define 或 module 来包装模块代码适用于需要跨前后端的模块
common cmd umd es6
模块化的构建工具拉勾教育互联网人实战大学BrowserifyBabel目标是让 CommonJS 风格的代码也运行定位是Transformer，即语法转换器，它承担着将ES6、JSX等语法转换为ES5语法的核心功能在浏览器端23RequireJSSystemJS1核心功能是支持AMD风格的模块兼容各种模块化规范的运行时工具化代码运行5WebpackS兼容各种模块化规范的标识方法；将模块化的概念延伸到其他类型的文件中
Rollup实现了Tree Shaking功能，以及天然支持ES6 模块的打包
Compiler.js中的基本流程readRecords读取构建记录，用于分包缓存优化，在未设置 recordsPath 时直接返回
读懂Webpack的生命周期Compiler和Compilation 都扩展自Tapable 类用于实现工作流程中的生命周期划分其中所暴露出来的生命周期节点称为Hook（俗称钩子）
Compiler Hooks构建器实例的生命周期初始化阶段构建过程阶段产物生成阶段
4424 || 已发布 || 10 | 流程分解：Webpack 的完整构建流程 || f0fef7047a5945849bc169f3a32156a1
Compilation Hooks——优化阶段优化依赖项生成Module lds生成Chunk生成Chunk lds优化 Module生成 Hash优化Chunk生成ModuleAssets优化 Tree生成ChunkAssets优化ChunkModules优化Assets
4425 || 已发布 || 11 | 编译提效：如何为 Webpack 编译阶段提速？ || fc12f741c3f54ae3907bd30a4b7d8bf7
编译提效：如何为Webpack编译阶段提速？在 Compiler 和Compilation的各生命周期阶段里通常耗时最长的分别是哪个阶段呢对于Compiler 实例耗时最长的是生成编译过程实例后的 make阶段对于Compilation实例编译模块和后续优化阶段的生成产物并压缩代码的过程都比较耗时
优化前的准备工作拉勾教育互联网人实战大学准备基于时间的分析工具例如speed-measure-webpack-plugin
准备基于产物内容的分析工具使用webpack-bundle-analyzer分析产物内容
优化前的准备工作提升这一阶段的构建效率，大致分为三个方向01减少执行编译的模块02提升单个模块构建的速度
并行构建以提升总体效率
IgnorePlugin 按需引入类库模块
Tree Shaking需要相应导入的依赖包使用ES6模块化，而相应的操作是在优化阶段进行的,Tree Shaking并不能减少模块编译阶段的构建时间lodash还是基于CommonJS需要替换为lodash-es才能生效
ExternalsWebpack的配置方面,externals更简单DllPlugin 需要独立的配置文件
DllPlugin 包含了依赖包的独立构建流程，externals 配置中通常使用已传入CDN的依赖包
externals配置的依赖包需要单独指定依赖模块的加载方式：全局对象、CommonJS、AMD等在引用依赖包的子模块时，DllPlugin无须更改，而 externals 则会将子模块打入项目包中
对于生产环境的代码构建而言，会根据项目实际情况判断是否开启Source Map在开启Source Map的情况下，优先选择与源文件分离的类型有条件也可以配合错误监控系统，将Source Map的构建和使用在线下监控后台中进行
由于ts-loader 默认在编译前进行类型检查，因此编译时间往往比较慢
以提升当前任务工作效率为目标的方案拉勾教育互联网人实战大学生成ChunkAssets即根据Chunk信息生成Chunk的产物代码优化Assets即压缩Chunk产物代码第一个任务主要在Webpack引擎内部的模块中处理
4426 || 已发布 || 12 | 打包提效：如何为 Webpack 打包阶段提速？ || 259739369bce423e8cfee0b9cdf59df2
Terser 和 UglifyJS插件中的效率优化拉勾教互联网人实战大terserOptions选项Cache 选项Parallel 选项默认开启，并发选项在大多即Terser 工具中的 minify选项集合。这些选项是对具体压缩处理过程产生影响的配置项默认开启，使用缓存能够极大程度上提升再次构建时的工作效率数情况下能够提升该插件的工作效率，但具体提升的程度则因项目而异
面向CSS的压缩工具OptimizeCSSAssetsPlugin（在Create-React-App中使用）OptimizeCSSNanoPlugin（在VUE-CLI中使用）CSSMinimizerWebpackPlugin（2020年Webpack社区新发布的CSS压缩插件）
Split ChunksSplit Chunks(分包）是指在Chunk生成之后将原先以入口点来划分的Chunks根据一定的规则分离出子Chunk的过程
只有ES6类型的模块才能进行 Tree Shaking
只有ES6类型的模块才能进行Tree ShakingCommonJS类型的模块lodash，需要依赖第三方提供的插件才能实现动态删除无效代码ES6风格的模块lodash-es,则可以进行Tree Shaking优化
Tree Shaking引入方式以default方式引入的模块,无法被Tree Shaking引入单个导出对象的方式，使用import*as xxx的语法，还是import{xxx}的语法都可以进行 Tree Shaking
缓存优化：那些基于缓存的优化方案 || cfd3cf2fa4f0439c9e8de6741a7f6d31
缓存优化：那些基于缓存的优化方案要让引入的模块支持 Tree Shaking，需要注意01引入的模块需要是ES6类型的CommonJS类型的则不支持0203引用第三方依赖包的情况下引入方式不能使用 default对应的 package.json 需要设置sideEffects:false 来表明无副作用
使用Babel的情况下，需要注意不同版本Babel 对于模块化的预设不同
拉勾教育编译阶段的缓存优化-—Babel-loader互联网人实战大学cacheCompressioncacheDirectorycacheldentifier默认使用 Babel相关依赖包默认为true，将缓存内容默认为false，即不开启缓的版本、babelrc配置文件压缩为gz包以减小缓存目录的体积。在设为false的情况下将跳过压缩和解压的过程存。当值为true时开启缓的内容，以及环境变量等与存并使用默认缓存目录，模块内容一起参与计算缓存也可以指定其他路径值作标识符为缓存目录
编译阶段的缓存优化——Cache-loader module.rules
优化打包阶段的缓存优化生成 ChunkAsset 时的缓存优化在Webpack4中，生成ChunkAsset过程中的缓存优化是受限制的只有在watch 模式下，且配置中开启cache时(development模式下自动开启）才能在这一阶段执行缓存的逻辑
优化打包阶段的缓存优化拉代码压缩时的缓存优化·对于JS的压缩，TerserWebpackPlugin 和UglifyJSPlugin 都是支持缓存设置的·对于CSS的压缩，目前最新发布的CSSMinimizerWebpackPlugin支持且默认开启缓存其他的插件如OptimizeCSSAssetsPlugin和OptimizeCSSNanoPlugin 目前还不支持使用缓存
缓存标识符发生变化导致的缓存失效支持缓存的Loader 和插件中会根据一些固定字段的值加上所处理的模块或Chunk的数据hash值来生成对应缓存的标识符例如特定依赖包的版本、对应插件的配置项信息、环境变量等注意：在许多项目的集成构建环境中，特定依赖包由于安装时所生成的语义化版本导致构建版本时常自动更新，并造成缓存失效
其他使用缓存的注意事项CI/CD 中的缓存目录问题在许多自动化集成的系统中，项目的构建空间会在每次构建执行完毕后，立即回收清理在集成化的平台中构建部署的项目，如果需要使用缓存需要根据对应平台的规范，将缓存设置到公共缓存目录下
其他使用缓存的注意事项拉勾与产物的持久化缓存相区别浏览器端加载资源的缓存问题以及相对应的如何在Webpack中生成产物的持久化缓存方法（hash、chunkhash、contenthash）
增量构建：Webpack 中的增量构建 || 59fe63919f1c4a3eb4078f45154193ce
增量构建：Webpack中的增量构建拉勾教互联网人实战课程中介绍的几种支持缓存的插件（TerserWebpackPlugin,CSSMinimizerWebpackPlugin）和Loader(babel-loader,cache-loader)在缓存方面有哪些相同的配置项呢用于指定是否开启缓存01以及指定缓存目录用于指定缓存标识符的02计算参数
增量构建：Webpack中的增量构建为什么我只改了一行代码，却需要花5分钟才能构建完成尽管只改动了一行代码，但是在执行构建时要完整执行所有模块的编译、优化和生成产物的处理过程
生产环境下使用增量构建的阻碍增量构建之所以快是因为将构建所需的数据都保留在内存中对于管理多项目的构建系统，构建过程是任务式的：任务结束后即结束进程并回收系统资源要想在生产环境下提升构建速度，首要条件是将缓存写入到文件系统中
生产环境下使用增量构建的阻碍Webpack 4Webpack 5cache配置只支持基于内存正式支持基于文件系统的持的缓存，并不支持文件系统久化缓存（Persistent的缓存Cache)
增量构建在每次执行构建时，只编译处理内容有修改的少量文件，极大地提升构建效率在Webpack4中，有两个配置项与增量构建相关：watch和cachewatchcache在添加模块与生成产物代码保留进程，使得初次构建后的数据对象能够在再次构建时可以利用cache对象进行相应阶段结果数据的读写时复用
版本特性：Webpack 5 中的优化细节 || 14433838b06249fab89ecc697f1af6fc
版本特性：Webpack 5中的优化细节拉勾教育互联间人实战大学为什么在开启增量构建后，有时候rebuild 还是会很慢呢Webpack 4 中的增量构建只运用到了新增模块与生成Chunk产物阶段，其他处理过程仍需通过其他方式进行优化
Webpack 5中的效率优化点Persistent Caching持久化缓存与构建效率相关的主要功能点：Tree ShakingLogs
Persistent Caching—-Cache基本配置拉勾cache.cacheDirectorycache.type值为'memory'或'filesystem'分别代表基于内存的临时缓存以及基于文件系统的持久化缓存缓存目录。默认目录为node_modules/.cache/webpackcache.namecache.cacheLocation缓存名称。是cacheDirectory中的子目录命名，默认值为缓存真正的存放地址默认使用的是：Webpack的${config.name}-${config.mode}path.resolve(cache.cacheDirectory, cache.name)
Persistent Caching一一单个模块的缓存失效fileDependenciesWebpack 5 会跟踪每个模块的依赖项contextDependenciesmissingDependencies
Persistent Caching—一全局的缓存失效当模块代码没有发生变化，但是构建处理过程本身发生变化时可能对构建后的产物代码产生影响在这种情况下需要让全局缓存失效，重新构建并生成新的缓存
cache还支持其他属性：managedPath、hashAlgorithm、store、idleTimeoutWebpack4中Webpack5中忽略各插件的缓存设置，由部分插件默认启用缓存功能引擎自身提供构建各环节的缓存读写逻辑
CommonJS Tree ShakingWebpack 5中增加了对一些CommonJS 风格模块代码的静态分析功功能
Webpack5中新增了改变微前端构建运行流程的 Module Federation 和对产物代码进行优化处理的 Runtime Modules优化了处理模块的工作队列，在生命周期Hooks中增加了stage 选项等
无包构建：盘点那些 No-bundle 的构建方案 || 6b03a78480f340639b93bf3f9c56e71d
无包构建：盘点那些No-bundle的构建方案拉PWebpack 5 中的持久化缓存究竟会影响哪些构建环节呢ResolverCachePlugin、 Compilation/modules编译模块FlagDependencyExportsPlugin、 ModuleConcatenationPlugin优化模块生成代码Compilation/codeGeneration、 Compilation/assetsTerserWebpackPlugin、 RealContentHashPlugin优化产物
什么是无包构建打包工具无包构建基于一个或多个入口点模在构建时只需处理模块的块，通过依赖分析将有依编译而无须打包，把模块赖关系的模块打包到一起，间的依赖关系完全交给浏最后形成少数几个产物代览器来处理码包
script type=module
HTML中的Script引用拉勾教育互联网人实战大学入口模块文件在页面中引用时需带有type="module"属性的script在浏览器中通过 defer的方式异步执行要带上type="module"属性01020403带有type="module"属性且带有即使多次加载相同模块，也只会async属性的 script，在浏览器中通过 async的方式异步执行执行一次
模块内依赖的引用拉勾教·只能使用import.….from！.！的ES6风格的模块导入方式，或者使用import(.….).then(.….)的ES6动态入方式，不支持其他模块化规范的引用方式（例如 require、define等）·导入的模块只支持使用相对路径（/xxx，/xxx，../xxx'）和URL方式（'https://xxx，‘http:∥xxx'）进引用，不支持直接使用包名开头的方式（'xxxx，‘xxx/xxx'）
只支持引用MIME Type为text/javascript方式的模块，不支持其他类型文件的加载（例如CSS等）
拉勾ViteVite 是Vue框架的作者尤雨溪最新推出的基于Native-ESM的Web构建工具在开发环境下基于Native-ESM处理构建过程，只编译不打包，在生产环境下基于Rollup打包
Vite 中的其他辅助功能拉勾教多框架支持在React和Preact项目中使用。工具默认提供了Vue、React和Preact对应的脚手架模板热更新（HMR)默认的3种框架的脚手架模板中都内置了HMR功能，也提供了HMR的API供第三方插件或项目代码使用
Vite的使用限制拉勾教育互联网人实战大学面向支持ES6的现代浏览器，在生产环境下，编译目标参数 esBuildTarget 的默认值为es2019，最低支持版本为es2015对Vue框架的支持目前仅限于最新的Vue 3 版本，不兼容更低版本
SnowpackSnowpack 在生产环境下默认使用无包构建而非打包模式Vite 仅在开发模式下使用
Snowpack 与Vite 的差异点拉勾教育互联网人实战大学相同的功能，实现细节不同工具稳定性Vite 支持类似"AAA/BBB"类型的子模块引用方式Vite的最新版本为v1.0.0-rc4Snowpack更新到了v2.11.1版本而Snowpack 目前尚不支持插件体系打包工具特殊优化Snowpack提供了较完善的插件Vite 使用 Rollup 作为打包工具Vite 中内置了对 Vue的大量构体系，Vite目前并没有提供自定义插件的相关文档Snowpack需要引入插件实现建优化打包功能
无包构建的优点01初次构建启动快0203按需编译增量构建速度快
无包构建的缺点浏览器的兼容性浏览器网络请求数量剧增
部署初探：为什么一般不在开发环境下部署代码？ || 25a688ebd8a1492ab9b090ac5cd46604
工作效率问题——CI/CD拉勾持续交付（Continuous Delivery,CD）持续集成(Continuous Integration,CI)开发人员提交代码后由CI/CD系统自动化地执行合并、构建、测试和部署等一系列管道化(Pipeline)的流程从而尽早发现和反馈代码问题，以小步快跑的方式加速软件的版本迭代过程
工具盘点：掌握那些流行的代码部署工具 || 34c55ceb8eb54a61a41592c7e9d32798
Jenkins 是诞生较早且使用广泛的开源持续集成工具2004年，Sun 公司推出它的前身 Husdon
2011 年更名为 Jenkins
CircleCI是一款基于云端的持续集成服务 free sf
Github Actions(GHA)是Github官方提供的CI/CD流程工具用于为Github 中的开源项目提供简单易用的持续集成工作流能力
Github Actions——功能特点
拉勾教育
互联间人实战大学
多容器测试
支持直接使用Docker-Compose进行多容器关联的测试（CircleCI中需要先执行安装才能使用）
社区支持
Github社区中提供众多工作流的模板可供选择，例如构建并发布 npm包、构建并提交到Docker Hub等费用情况
对于公开的仓库，以及在自运维执行器的情况下是免费的
对于私有仓库则提供一定额度的免费执行时间和免费存储空间，超出部分需要收费
Gitlab是由Gitlab Inc.开发的基于Git 的版本管理与软件开发平台具有在线编辑、Wiki、CI/CD等功能
安装提效：部署流程中的依赖安装效率优化 || 68dbc6ed4e9c4c4c80c3613dac480205
一个优秀的部署系统如果你所在的企业需要选择一款CI/CD工具，你选择的主要依据有哪些呢·选择付费系统还是免费系统，选择云服务还是自运维·所选的方案是否便于对接上下游系统流程·使用配置是否便捷，对用户而言是否有学习成本….…
不同安装工具单从效率而言，各工具在不同安装条件下的优劣各有不同·如果考虑各种场景下的综合表现，pnpm是最稳定高效的·如果考虑现实情况中，Yarn v1是更好的选择·如果考虑只有Lock文件的情况，则npm的表现要优于Yarn·在无安装目录的情况下，Yarn v1的PnP 模式效率要高于普通模式·Yarn v2支持针对单个项目清除缓存而不影响全局
4434 || 已发布 || 20 | 流程优化：部署流程中的构建流程策略优化 || 031aed724f3446d29f3a63d3060d3069
CI系统中的持久化缓存备份项目构建结束后，对项目的目录结构进行扫描，找到.cache 目录依据其相对项目根目录的路径生成备份目录名称例如把项目中/client/node_modules/.cache多层目录转换为折叠目录client__node_modules__.cache,然后将其备份到CI系统专用的持久化缓存备份空间中
提升压缩效率的工具压缩工具Gzip (default level 6)Gzip (level 1)Pigz (default level 9)Pigz (level 1)Zstd (default level 3)Zstd (level 1)
4435 || 已发布 || 21 | 容器方案：从构建到部署，容器化方案的优势有哪些？ || b7648399d01e4685a5b159205a08771c
什么是容器化拉勾容器化(Containerization) 通常指以 Docker技术为代表，将操作系统内核虚拟化的技术占用空间更小、性能开销更低、启动更快、支持弹性伸缩以及支持容器间互联等优势
Docker容器的网络有多种驱动类型，例如bridge、host、overlay等bridge--用于点对点访问容器间端口或者将容器端口映射到宿主环境下host --直接使用宿主环境的网络
4436 || 已发布 || 22 | 案例分析：搭建基本的前端高效部署系统 || 87e2d369af1a4651967371564f1d45f6
Webhook部署系统将一个Webhook接口注册到代码管理系统（CVS）中提交代码后，触发CVS的Webhook,由CVS将提交事件通知给部署系统
状态、事件与 Socket·初始化：已部署服务接收到了Webhook的提交信息，并提取了构建所需的所有配置数同时也已创建了对应的构建记录·队列中：该构建任务已列入等待队列中·进行中：任务已开始执行·已取消：任务已被用户主动取消执行·已成功：构建任务已完成，用户可以进行下一步的发布流程·已失败：构建任务已失败，需要用户确认失败原因并调试修复·已超时：构建任务已超时
4437 || 已发布 || 结束语 | 前端效率工程化的未来展望 || e20b37254363463ea7f892d24d063c9d
云工作流开发效率方面，由Web IDE发展而来的云开发工具目前正逐渐成为几个大型厂商探索的方向之一
基于Al的生成页面工具（例如微软的Sketch2Code)可以进一步解放生产力
营销策略
88633/202412/1388633-2
88633/202412/1388633-20241228174745605-1426651285.png)
0620.png)
88633/202412/1388633-20241228174748121-396662408.png)
