随笔分类 - 前端架构
摘要：1、背景 1.1、项目规模： 前端项目的规模不同，成本收益比也会有所差别。通常来说，人员越多、项目复杂度越高，那么收益/成本的比值越大。 对于人数较少、项目简单的开发团队，可能有部分措施不适用，因此应该根据具体情况来选用。 1.2、核心思想： 【1】解决问题：前端架构的设计，应是用于解决已存在或者未
阅读全文
posted @ 2022-06-09 19:23
axl234
摘要：无论做业务需求还是做平台需求的同学，随着需求的不断迭代，通常都会出现逻辑复杂、状态混乱的现象，维护和新增功能的成本也变的十分巨大，苦不堪言。下图用需求、业务代码、测试代码做对比： 图中分了 3 个阶段： 阶段 1：正常，都是线性增长。 阶段 2：需求数正常增长，业务代码行数开始增长，测试代码行数大幅
阅读全文
posted @ 2022-03-13 10:27
axl234
摘要：本文主要介绍 webpack5 项目的打包优化方案 打包优化 速度分析:要进行打包速度的优化，首先我们需要搞明白哪一些流程的在打包执行过程中耗时较长。 这里我们可以借助 speed-measure-webpack-plugin 插件，它分析 webpack 的总打包耗时以及每个 plugin 和 l
阅读全文
摘要：本文介绍几种前端常用的数据mock方案，通过了解自动化mock的方式，减少重复工作，减少真实联调问题 1： 接口管理工具 代表： rap（阿里，已停止维护，使用rap2） swagger moco（参考, 和前端处理mock类似，json假数据+服务） yapi(去哪儿网开发yapi 官网) 优缺点
阅读全文
摘要：当我们开始搭建前端项目的时候，需要从这五个方面去考虑：易开发、可扩展、易维护、易构建、易测试。 易开发：首先是开发工具是否完善，我们采用的技术栈是否有对应的开发工具来支持。然后我们需要考虑所用的技术栈的生态圈是否繁荣。这就意味着我们在遇到实际的业务场景的时候，生态圈中是否有对应的解决方案。还有就是社
阅读全文
摘要：微前端 微前端的概念来源于微服务，其整体的架构思路是将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，之后将这些应用组成整体，在用户看来仍然是内聚的单个产品，用户体验是一致的。 从概念上看，微前端架构由主应用和子应用两个部分组成，子应用负责具体的业务实现，主应用负责子应用的加载和卸载
阅读全文
摘要：工作中对开发的要求都不仅限于实现功能。你是否有想过，如果只是编写代码，刚毕业的应届生花几周时间也一样能做到，那么我们的优势在哪里呢？ 洞察工作中的瓶颈，并有足够的能力去设计方案、排期开发、解决并复盘，这些技能更能突显我们在岗位上的价值和能力。对团队来说，更需要这样能主动发现并解决问题的成员，而不是安
阅读全文
摘要：最早的时候页面是服务端渲染的，也就是 PHP、JSP 那些技术，服务端通过模版引擎填充数据，返回生成的 html，交给浏览器渲染。那时候表单会同步提交，服务端返回结果页面的 html。 后来浏览器有了 ajax 技术，可以异步的请求，服务端返回 xml 或者 json。ajax 最早是基于 xml
阅读全文
摘要：对于维护过多个package的同学来说，都会遇到一个选择题，这些package是放在一个仓库里维护还是放在多个仓库里单独维护，本文通过一个示例讲述了如何基于Lerna管理多个package，并和其它工具整合，打造高效、完美的工作流，最终形成一个最佳实践 背景 最近在工作中接触到一个项目，这个项目是维
阅读全文
摘要：Create react App 是一个官方支持的创建 react 单页应用程序的方法。它提供了一个零配置的现代构建设置。虽然开箱即用，但是开发中我们还是少不了做一些修改，下面总结了一些常用的配置，本文基于webpack4.44.2进行配置 关于eject 执行npm run eject命令会将re
阅读全文
摘要：creat-react-app 初始化项目后，我们对项目的启动是通过 react-scripts 实现的，项目开发过程中，如果需要引入对less 支持，和高阶组件对装饰器的使用，我们需要在webpack 中添加对此功能的支持，我们需要custom-cra 这个包，https://www.npmjs.
阅读全文
摘要：create-react-app 安装antd-design 配置antd按需加载 antd 的 JS 代码默认支持基于 ES modules 的 tree shaking。 antd的css按需加载优化： 安装react-app-rewired、customize-cra、babel-plugin
阅读全文
摘要：减少 Webpack 打包时间 优化 Loader 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。 首先我们可以优化
阅读全文
摘要：HTTP/2 很好的解决了当下最常用的 HTTP/1 所存在的一些性能问题，只需要升级到该协议就可以减少很多之前需要做的性能优化工作，当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。 虽然 HTTP/2 已经解决了很多问题，但是并不代表它已经是完美的了，HTTP/3 就是为了解决 HT
阅读全文
摘要：一、基础配置 1、init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制代码 2、安装webpack yarn add webpack webpack-cli webpac
阅读全文
摘要：1. 后端模板渲染 前端与后端最初的渲染方式是后端模板渲染，就是由后端使用模板引擎渲染好 html 后，返回给前端，前端再用 js 去操作 dom 或者渲染其他动态的部分。 这个过程大致分成以下几个步骤： 在这个过程中，前端的 html 代码需要嵌入到后端代码中（如 java、php），并且在很多情
阅读全文
摘要：外部客户端访问微服务架构中的服务时，服务端会对认证和传输有一些常见的要求。API 网关提供共享层来处理服务协议之间的差异，并满足特定客户端（如桌面浏览器、移动设备和老系统）的要求。 微服务和消费者 微服务是面向服务的架构，团队可以独立设计、开发和发布应用程序。它允许在系统各个层面上的技术多样性，团队
阅读全文
摘要：首先我们的需求： 打包调试 提取公共代码 压缩 热替换 1.打包调试 第一步，我们在目标文件夹下安装webpack(假设已有package.json)npm i webpack@ -gcnpm i webpack@ --save-dev(这里推荐大家安装稳定的2.x版本) 项目结构如图： 我们将编写
阅读全文
摘要：背景 相信进行过前端开发的同学都知道，前端测试不仅仅涉及到功能的测试，而且也需要考虑到界面样式测试、多浏览器兼容性测试、性能测试。本文主要讨论分析目前前端测试的现状，并讨论目前流行的测试工具，下篇文章将会介绍工具的使用方法 前端测试分类 前端测试主要分三大方向测试，而这三大方向也分很多小方向测试，首
阅读全文
摘要：命令行工具 devtool ，它可以在 Chrome 的开发者工具中运行 Node.js 程序。 下面的记录显示了在一个 HTTP 服务器中设置断点的情况。 该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起。它的目的在于为调试、分析和开发 Node.js 应
阅读全文
浙公网安备 33010602011771号