随笔分类 - 前端工程化
摘要：Webpack从入门到精通 https://www.bilibili.com/video/BV1e7411j7T5 2 4 01_尚硅谷_课程介绍 HMR loader resolve plugin optimization devtool dll 性能优化 webpack5 tree shakin
阅读全文
摘要：结构型 适配器模式 `将一个类的接口转化为另外一个接口.解决使类之间接口不兼容问题 优点 1.可以让任何两个没有关联的类一起运行。 2.提高了类的复用性、透明度、以及灵活性 3.适配对象，适配库，适配数据 缺点 额外对象的创建，非直接调用，存在一定的开销 过多的使用适配器模式，会让系统变得零乱，不易
阅读全文
摘要：Gulp入门 Gulp入门：https://www.bilibili.com/video/BV1yA411s72G 01_了解gulp gulp 挂p 了解 gulp 前端自动化打包构建工具 =>打包：把文件压缩，整合，移动，混淆 了解一下前端的打包构建工具 gulp：基于流的打包构建工具 webp
阅读全文
摘要：设计模式简介 最佳的实践得来的设计经验 设计模式 开发过程中面临的一般问题的解决方案 相当长的一段时间的试验和错误总结出来 设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结 设计模式原则 S – Single Responsibility Principle 单一职责原则
阅读全文
摘要：你好，我是李思嘉。 本专栏的内容到这里就结束了。我们先来简单回顾一下整个课程的主要内容，如下图： 在这个专栏中，我主要介绍且梳理了前端工程化中效率提升方向的知识，内容涵盖开发效率、构建效率和部署效率三个方面。希望你通过这个系列课程的学习，能建立起前端效率工程化方面相对完整的知识体系，同时在前端开发日
阅读全文
摘要：上节课的思考题是容器化部署与容器化运行服务的差异点有哪些。这里我总结三个有代表性的供你参考： 容器持续时间不同：容器化部署的容器只在部署时创建使用，部署完成后即删除；而容器化服务则通常长时间运行。 容器互联：容器化部署中的容器通常无须访问其他容器；而容器化服务则涉及多容器互联，以及更多弹性伸缩的容器
阅读全文
摘要：上节课我们主要介绍了部署系统中各耗时环节的一些常用优化方案。课后思考题是：课程中提到了几种利用缓存的优化方案呢？如果你认真学习了课程内容，不难发现我一共提到了三种基于缓存的优化方案，它们分别是：多项目共用依赖缓存、依赖安装目录的缓存以及构建过程的持久化缓存备份。这些缓存方案不仅可以运用到传统的部署方
阅读全文
摘要：上节课我们分析了部署流程中，安装依赖阶段执行效率的影响因素和执行过程细节。思考题是如果使用 npm 的话，在最佳条件下是否也可以达到像 Yarn 一样瞬间完成依赖安装呢？答案是当然可以。在今天课程的第一部分我们就将了解如何利用安装目录缓存达到这一效果。 我们将从部署流程效率优化的实战角度来分析几个主
阅读全文
摘要：上节课我们主要介绍了几个典型的部署工具及其特点。课后的思考题是如果所在企业需要选择一款 CI/CD 工具，你选择的依据有哪些？如果是我会从这几个方面思考：选择付费系统还是免费系统，选择云服务还是自运维，所选的方案是否便于对接上下游系统流程，使用配置是否便捷，对用户而言是否有学习成本......希望这
阅读全文
摘要：上节课我们通过分析“为什么不在本地环境进行部署”这个问题，来对比部署系统的重要性：一个优秀的部署系统，能够自动化地完整部署流程的各环节，无须占用开发人员的时间与精力，同时又能保证环境与过程的一致性，增强流程的稳定性，降低外部因素导致的风险。此外，部署系统还可以提供过程日志、历史版本构建包、通知邮件等
阅读全文
摘要：这节课我们将进入前端效率工程化的第三个模块——部署效率篇。本模块主要讨论两个方面的问题：第一个是在前端项目的构建部署流程里，除了使用构建工具执行构建之外，还有哪些因素会影响整个部署流程的工作效率？第二个是在部署系统中进行项目构建时，又会面临哪些和环境相关的问题和优化方案？ 这节课我们先来讨论为什么要
阅读全文
摘要：上节课我们讨论了 Webpack 的最新版本 Webpack 5 所带来的提效新功能。思考题是 Webpack 5 中的持久化缓存究竟会影响哪些构建环节呢？ 通过对 compiler.cache.hook.get 的追踪不难发现：持久化缓存一共影响下面这些环节与内置的插件： 编译模块：Resolve
阅读全文
摘要：开始课程前，我们先来解答上一节课的思考题：为什么在开启增量构建后，有时候 rebuild 还是会很慢呢？我们可以从两方面来找原因。首先，Webpack 4 中的增量构建只运用到了新增模块与生成 Chunk 产物阶段，其他处理过程（如代码压缩）仍需要通过其他方式进行优化，例如分包和压缩插件的缓存。其次
阅读全文
摘要：开始课程前，我先来解答上一节课的思考题：课程中介绍的几种支持缓存的插件（TerserWebpackPlugin，CSSMinimizerWebpackPlugin）和 Loader（babel-loader，cache-loader）在缓存方面有哪些相同的配置项呢？ 通过对比不难发现，这些工具通常至
阅读全文
摘要：上节课的思考题是 Webpack 4 中 Tree Shaking 的触发条件有哪些？我们一起来回忆一下，要让引入的模块支持 Tree Shaking，一般有 4 点需要注意： 引入的模块需要是 ES6 类型的，CommonJS 类型的则不支持。 引入方式不能使用 default。 引用第三方依赖包
阅读全文
摘要：上节课我们聊了 Webpack 构建流程中第一阶段，也就是编译模块阶段的提效方案，这些方案可以归为三个不同的优化方向。不知道大家课后有没有对照分析自己在项目里用到了其中的哪些方案呢？ 今天我们就来继续聊聊 Webpack 构建流程中的第二个阶段，也就是从代码优化到生成产物阶段的效率提升问题（这节课的
阅读全文
摘要：上一课我们聊了 Webpack 的基本工作流程，分析了其中几个主要源码文件的执行过程，并介绍了 Compiler 和 Compilation 两个核心模块中的生命周期 Hooks。 上节课后的思考题是，在 Compiler 和 Compilation 的工作流程里，最耗时的阶段分别是哪个。对于 Co
阅读全文
摘要：上节课我们聊了过去 20 余年里，前端项目开发时的工程化需求，以及对应产生的工具解决方案，其中最广泛运用的构建工具是 Webpack。这节课我们就来深入分析 Webpack 中的效率优化问题。 要想全面地分析 Webpack 构建工具的优化方案，首先要先对它的工作流程有一定理解，这样才能针对项目中可
阅读全文
摘要：今天开始我们进入本专栏的第二模块：构建效率。本模块主要探讨如何优化构建细节。在这之前，我想先聊一聊前端开发历程中构建工具的演进。通过这节课，让你对构建工具的诞生发展及它们各自解决的问题有一个直观了解。 前端开发语言的诞生 前端开发语言发展历程回顾： 1991 年，Tim Berners-Lee 发布
阅读全文
摘要：在开始今天的课程前，我们先来简单回顾下上节课的思考题：低代码工具主要面向什么样的用户群体呢？低代码工具本质上是对组件化开发流程的简化，但在开发过程中，仍然可能进行编码调试。因此，它面向的用户群体应该是具有一定技术基础的开发人员，专业的后端开发也可以使用这类工具来快速开发项目中的前端功能。 在介绍低代
阅读全文
浙公网安备 33010602011771号