随笔分类 -  前端工程化

摘要:你好,我是李思嘉。 本专栏的内容到这里就结束了。我们先来简单回顾一下整个课程的主要内容,如下图: 在这个专栏中,我主要介绍且梳理了前端工程化中效率提升方向的知识,内容涵盖开发效率、构建效率和部署效率三个方面。希望你通过这个系列课程的学习,能建立起前端效率工程化方面相对完整的知识体系,同时在前端开发日 阅读全文
posted @ 2024-12-28 18:03 KooTeam 阅读(11) 评论(0) 推荐(0) 编辑
摘要:上节课的思考题是容器化部署与容器化运行服务的差异点有哪些。这里我总结三个有代表性的供你参考: 容器持续时间不同:容器化部署的容器只在部署时创建使用,部署完成后即删除;而容器化服务则通常长时间运行。 容器互联:容器化部署中的容器通常无须访问其他容器;而容器化服务则涉及多容器互联,以及更多弹性伸缩的容器 阅读全文
posted @ 2024-12-28 18:02 KooTeam 阅读(9) 评论(0) 推荐(0) 编辑
摘要:上节课我们主要介绍了部署系统中各耗时环节的一些常用优化方案。课后思考题是:课程中提到了几种利用缓存的优化方案呢?如果你认真学习了课程内容,不难发现我一共提到了三种基于缓存的优化方案,它们分别是:多项目共用依赖缓存、依赖安装目录的缓存以及构建过程的持久化缓存备份。这些缓存方案不仅可以运用到传统的部署方 阅读全文
posted @ 2024-12-28 18:02 KooTeam 阅读(26) 评论(0) 推荐(0) 编辑
摘要:上节课我们分析了部署流程中,安装依赖阶段执行效率的影响因素和执行过程细节。思考题是如果使用 npm 的话,在最佳条件下是否也可以达到像 Yarn 一样瞬间完成依赖安装呢?答案是当然可以。在今天课程的第一部分我们就将了解如何利用安装目录缓存达到这一效果。 我们将从部署流程效率优化的实战角度来分析几个主 阅读全文
posted @ 2024-12-28 18:02 KooTeam 阅读(9) 评论(0) 推荐(0) 编辑
摘要:上节课我们主要介绍了几个典型的部署工具及其特点。课后的思考题是如果所在企业需要选择一款 CI/CD 工具,你选择的依据有哪些?如果是我会从这几个方面思考:选择付费系统还是免费系统,选择云服务还是自运维,所选的方案是否便于对接上下游系统流程,使用配置是否便捷,对用户而言是否有学习成本......希望这 阅读全文
posted @ 2024-12-28 18:02 KooTeam 阅读(10) 评论(0) 推荐(0) 编辑
摘要:上节课我们通过分析“为什么不在本地环境进行部署”这个问题,来对比部署系统的重要性:一个优秀的部署系统,能够自动化地完整部署流程的各环节,无须占用开发人员的时间与精力,同时又能保证环境与过程的一致性,增强流程的稳定性,降低外部因素导致的风险。此外,部署系统还可以提供过程日志、历史版本构建包、通知邮件等 阅读全文
posted @ 2024-12-28 18:01 KooTeam 阅读(29) 评论(0) 推荐(0) 编辑
摘要:这节课我们将进入前端效率工程化的第三个模块——部署效率篇。本模块主要讨论两个方面的问题:第一个是在前端项目的构建部署流程里,除了使用构建工具执行构建之外,还有哪些因素会影响整个部署流程的工作效率?第二个是在部署系统中进行项目构建时,又会面临哪些和环境相关的问题和优化方案? 这节课我们先来讨论为什么要 阅读全文
posted @ 2024-12-28 18:01 KooTeam 阅读(10) 评论(0) 推荐(0) 编辑
摘要:上节课我们讨论了 Webpack 的最新版本 Webpack 5 所带来的提效新功能。思考题是 Webpack 5 中的持久化缓存究竟会影响哪些构建环节呢? 通过对 compiler.cache.hook.get 的追踪不难发现:持久化缓存一共影响下面这些环节与内置的插件: 编译模块:Resolve 阅读全文
posted @ 2024-12-28 18:01 KooTeam 阅读(14) 评论(0) 推荐(0) 编辑
摘要:开始课程前,我们先来解答上一节课的思考题:为什么在开启增量构建后,有时候 rebuild 还是会很慢呢?我们可以从两方面来找原因。首先,Webpack 4 中的增量构建只运用到了新增模块与生成 Chunk 产物阶段,其他处理过程(如代码压缩)仍需要通过其他方式进行优化,例如分包和压缩插件的缓存。其次 阅读全文
posted @ 2024-12-28 18:01 KooTeam 阅读(19) 评论(0) 推荐(0) 编辑
摘要:开始课程前,我先来解答上一节课的思考题:课程中介绍的几种支持缓存的插件(TerserWebpackPlugin,CSSMinimizerWebpackPlugin)和 Loader(babel-loader,cache-loader)在缓存方面有哪些相同的配置项呢? 通过对比不难发现,这些工具通常至 阅读全文
posted @ 2024-12-28 18:00 KooTeam 阅读(18) 评论(0) 推荐(0) 编辑
摘要:上节课的思考题是 Webpack 4 中 Tree Shaking 的触发条件有哪些?我们一起来回忆一下,要让引入的模块支持 Tree Shaking,一般有 4 点需要注意: 引入的模块需要是 ES6 类型的,CommonJS 类型的则不支持。 引入方式不能使用 default。 引用第三方依赖包 阅读全文
posted @ 2024-12-28 18:00 KooTeam 阅读(7) 评论(0) 推荐(0) 编辑
摘要:上节课我们聊了 Webpack 构建流程中第一阶段,也就是编译模块阶段的提效方案,这些方案可以归为三个不同的优化方向。不知道大家课后有没有对照分析自己在项目里用到了其中的哪些方案呢? 今天我们就来继续聊聊 Webpack 构建流程中的第二个阶段,也就是从代码优化到生成产物阶段的效率提升问题(这节课的 阅读全文
posted @ 2024-12-28 17:59 KooTeam 阅读(10) 评论(0) 推荐(0) 编辑
摘要:上一课我们聊了 Webpack 的基本工作流程,分析了其中几个主要源码文件的执行过程,并介绍了 Compiler 和 Compilation 两个核心模块中的生命周期 Hooks。 上节课后的思考题是,在 Compiler 和 Compilation 的工作流程里,最耗时的阶段分别是哪个。对于 Co 阅读全文
posted @ 2024-12-28 17:59 KooTeam 阅读(17) 评论(0) 推荐(0) 编辑
摘要:上节课我们聊了过去 20 余年里,前端项目开发时的工程化需求,以及对应产生的工具解决方案,其中最广泛运用的构建工具是 Webpack。这节课我们就来深入分析 Webpack 中的效率优化问题。 要想全面地分析 Webpack 构建工具的优化方案,首先要先对它的工作流程有一定理解,这样才能针对项目中可 阅读全文
posted @ 2024-12-28 17:59 KooTeam 阅读(29) 评论(0) 推荐(0) 编辑
摘要:今天开始我们进入本专栏的第二模块:构建效率。本模块主要探讨如何优化构建细节。在这之前,我想先聊一聊前端开发历程中构建工具的演进。通过这节课,让你对构建工具的诞生发展及它们各自解决的问题有一个直观了解。 前端开发语言的诞生 前端开发语言发展历程回顾: 1991 年,Tim Berners-Lee 发布 阅读全文
posted @ 2024-12-28 17:59 KooTeam 阅读(15) 评论(0) 推荐(0) 编辑
摘要:在开始今天的课程前,我们先来简单回顾下上节课的思考题:低代码工具主要面向什么样的用户群体呢?低代码工具本质上是对组件化开发流程的简化,但在开发过程中,仍然可能进行编码调试。因此,它面向的用户群体应该是具有一定技术基础的开发人员,专业的后端开发也可以使用这类工具来快速开发项目中的前端功能。 在介绍低代 阅读全文
posted @ 2024-12-28 17:58 KooTeam 阅读(9) 评论(0) 推荐(0) 编辑
摘要:在进入到这一课的内容之前先让我们来回顾下,通过脚手架工具生成初始化代码,以及通过 Snippet 工具生成代码片段的方式。两种方案的相同在于,通过简单的输入和选择就能获得预设后的项目代码。这种转化方式对于效率的提升效果是清晰可见的。于是有人就想到,能不能更进一步,将我们日常开发的手写代码过程,都转变 阅读全文
posted @ 2024-12-28 17:58 KooTeam 阅读(14) 评论(0) 推荐(0) 编辑
摘要:上一讲我们讨论了在开发时提升编码效率的相关工具。在项目开发过程中,我们可以编写自定义的代码片段缩写规则来提升个人的编码效率。那么,如果想要把这些规则分享给团队内的其他成员或自己的其他电脑设备时又该怎么做呢?带着这个问题,我们就进入到今天要聊的主题:云开发(Cloud Development)。 和之 阅读全文
posted @ 2024-12-28 17:58 KooTeam 阅读(11) 评论(0) 推荐(0) 编辑
摘要:上一课时我们讨论了开发过程中 Mock 工具的使用。Mock 工具能帮助解决前端开发过程中的接口依赖问题,作为开发流程规范的一环,起到提升整体开发效率的作用。 今天我们来聊聊如何提高开发时的编码效率的问题。 俗话说,不会“偷懒”的程序员不是好程序员。一名好的程序员会不断地思考如何把重复的流程通过程序 阅读全文
posted @ 2024-12-28 17:58 KooTeam 阅读(11) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示