wordpress设置仅自己可见/优化大师人工服务电话

wordpress设置仅自己可见,优化大师人工服务电话,白鹭引擎可以做网站吗,动易政府网站管理系统价格前端工程化详解 & 包管理工具 前端工程化什么是前端工程化前端工程化发展脚手架能力 体验度量规范流程效能流程扭转 稳定性建设针对整体稳定性建设 可监控:前端监控系统 包管理工具npm包详解package.jsonname 模块名description 模块描述信息keywords&#xff1…

前端工程化详解 & 包管理工具

  • 前端工程化
    • 什么是前端工程化
    • 前端工程化发展
      • 脚手架能力
    • 体验度量
    • 规范流程
      • 效能流程扭转
    • 稳定性建设
      • 针对整体稳定性建设
    • 可监控:
      • 前端监控系统
  • 包管理工具
    • npm包详解
      • package.json
        • name 模块名
        • description 模块描述信息
        • keywords:关键词
        • homepage:模块首页
        • repository:git仓库地址
        • private 私有化
        • version 包版本
        • 依赖配置
        • 目录 & 文件项目
        • script 脚本命令
        • 依赖版本管理
      • 版本约束文件 package-lock.json
      • npm install 原理
    • pnpm
      • 怎么做到节省空间,提高安装速度的?
    • multirepo vs monorepo

  • 工程化体系
  • 脚手架能力
  • 体验度量
  • 规范流程
  • npm package.json 解析
  • 包管理工具 pnpm等

不要仅仅只是局限于开发一个需求,而是要站在宏观的角度上看整个技术体系,对技术领域有全方位的认识。

工程化体系的演进,以及演进过程中做的什么事情,现有链路是否在工作流中存在,如果没有的话,自己尝试将工程链路进行搭建。

前端工程化

什么是前端工程化

前端工程化 = 前端 + 软件工程
软件工程:系统和软件工程层面上的方法、规范,技术手段提升开发的效率,软件工程来自于实体行业类似建筑行业的方法论,将建筑行业的方法论运用到软件领域上,软件领域的相关方法论又延伸到前端上

前端工程化 = 将工程化的方法系统化应用到前端开发中
Clean Code 代码整洁指导

基于业务诉求 => 产出架构设计 又快又好又稳 <= 系统 演进 可量化的方法

前端工程化发展

  1. 前后端不分离,服务端渲染前端页面,jsp,php内嵌前端逻辑
  2. 前后端分离:B/S架构
  3. 模块化:AMD,CMD,CommonJS,esmodule格式化规范工程+vite 开发
    模块化 vite
    (1)规范化 AMD CMD
    (2)组件化 => 组件库 elementUI,ant design
  4. 自动化:解决之前人工重复干预的事情,自动化构建使得体积非常的小,可以管理,简化开发过程。 前端框架自动化,构建系统 应运而生
    基于自动化做的最佳实践:
    开箱即用的框架,vite create-vite,不需要进行额外的配置,就可以在当前的工程中进行开发,无需从零到一进行整个项目的搭建。但是不能只停留在使用层面,需要了解其中的原理,消化吸收变成自己的。
    达到的目标:好 快 稳

vite在开发环境设计思路巧妙,与传统打包工具是不太一样的,有了vite后,基于程序构建,按需引入就是秒级的开发体验,无论当前工程多么庞大,都与当前是无关的,当前需要哪个文件,才会及时进行编译处理,不会走构建的过程,是no-bundle的思想,内部的很多设计思路都是比较巧妙的
比如,预构建,怎么去进行预构建,需要进行模块的转换,像怎么把commonJS模块转为esModule模块,
因为esModule模块才能被浏览器所引入,解析执行import的逻辑,相关模块进行预编译处理,用到esbuild,
esbuild使用 go 语言来处理,能够多线程的对当前的文件进行打包处理,
所以现在,不要仅仅局限于前端相关语言开发工程化,还要尝试使用不同语言,rest,go语言,使用这些语言开发的工具,都可以被前端所使用。

构建工具使用其他语言来处理了
=>JS:高级语言,要处理成机器所能识别的语言,需要各种各样的转化
高级语言使用babel-loader进行转化的化,需要经历 ast 的转换,经历词法分析,语法分析,代码转换为语法树,将语法树进行修改调整,修改调整转换成代码的过程,需要频繁的经历转义,是比较耗时的,性能比较差的
如果再加上其他语言进行并行处理的话,效率是比较高的,就像 swc-loader 平替 babel-loader
其他语言加上提高效率 swc-loader => babel-loader

前端市场逐渐趋于饱和,从热门到稳定的阶段
并没有大的变动
当下能做的,生成自己的开发工程的最佳实践

脚手架能力

场景:非常多的系统,集成到同一个portal当中
技术体系:微前端 => 进行系统架构升级
主子应用
可以主子应用各自的技术体系

=> 形成自己的脚手架
=> 1. 封装一个子应用模板,需要引入组件库,来保证视觉的风格统一;引入编码规范,保证代码风格统一;子应用中需要适配微前端体系
=> 2. 通过自己的脚手架拉取这样的模板,xxx create 拉取模板

业务项目生成周期的几个阶段:

  1. 准备阶段
    技术选型
    代码规范的制定
    (1)分支管理规范 git workflow
    (2)项目初始化规范
    (3)lint规范
    集成到脚手架当中做处理,无需去关注统一的,又比较繁琐的这样的内容

  2. 生态规范:UI库 物料规范等

  3. 三方规范
    (1) npm 发包
    (2)github,需要遵循 ci cd 等规范

  4. 开发阶段
    (1)规范落地
    (2)开发 打包流程
    (3)本地 mock 服务
    (4)代码质量管控
    (5)单元测试,E2E测试
    这些都是在开发阶段可以集成的点

  5. 发布流程
    (1)git commitlint
    (2)changlog 规范
    (3)部署 验收

业务项目生成周期:
MRD(市场层面调研最终产生的结果)=> PRD(产品方案的评审) =>进入上述所说的阶段

体验度量

=> 简历中 最好体现性能优化策略
用户体验:定义指标,衡量系统好不好
定性:问卷
定量

=> 举例:度量 京东的首页 性能

  1. 关注指标:FCP(首屏加载时间),LCP(最大内容加载时间) ,TTFB(首字节时间)
    TTFB:在ssr渲染时,客户端发起请求到服务端响应数据这样一个过程的时间,用来衡量网络消耗的
    性能相关网站
    LCP:对指标的衡量,性能优化的提升,怎么做才能有更好的体验

在这里插入图片描述

  1. 收集数据:performance api 上报阶段数据,不能以本机(手机,电脑)这种样本量比较少的去分析数据
    从浏览器中输入url,到最终界面load,经历如下几个阶段:
    DNS解析,TCP的建联,请求的时间,响应的时间,页面加载渲染的时间,最终load完成
    在这里插入图片描述
    比如,针对计算DNS时间,domainLoopupEnd - domainLoopupStart,在每个阶段打相关点,收集到对应的数据进行上报,记录当前用户这次访问所消耗的,这样的话,这些数据才是 可信赖 的。
    策略优化,比如,针对webpack的优化措施,针对网络请求的优化措施,针对图片处理相关的优化措施等。
    数据效果:
    衡量指标 — 不能用平均数据来看
    性能水位分为100位,看95%的那个人
    P95 LCP 4.0s 提升到了 2.4s => 才有可信度
    P99

  2. 体验度量设计
    要解决的问题:无行为埋点,埋点数据的上报,针对度量数据完善数据指标,各个阶段进行上报,建立度量体系
    在这里插入图片描述

规范流程

效能流程扭转

在这里插入图片描述
针对这样的一个平台,就能关注到团队规模层面下需求层面一个产品的健康度,团队成员代码健康度等。

稳定性建设

前端的几把斧子:性能,稳定性,研发效率,质量
每个阶段都不能忽视
关注的几个点:

  1. 可预防
  2. 可监控
  3. 可回滚

针对整体稳定性建设

发布前防控

  1. 基础建设
    团队机制:编码规范 故障规范 日志规范,p0,p1,p2,p3
    稳定性工具:CLI,Snippet,物料市场
  2. 研发态能力建设
    迭代质量:依赖监测,测试用例,数据聚合
    源码架构:模块化,容器化,状态管控
    攻防演练:故障演练,压测演练,CR注入
    全域容灾:容灾策略,容灾演练,容灾预警

发布后监控:

  1. 研发态能力建设
    监控预警:脚本异常,接口异常,资源异常
    监控大盘:数据大盘,监控排名,预警配置
    行为监控:行为上报,sourcemap,行为可视化
    线上工具:健康报告,定义指标看板,错误定位

在这里插入图片描述

可监控:

前端监控系统

在这里插入图片描述
要关注的几个点:

  1. 异常捕获 收集异常(脚本,资源,接口)相关内容,监听 onError,promise事件来捕获
  2. 数据上报,通过gif图像方式避免跨域的问题
  3. 针对数据采集,每个阶段需要打上标
  4. 数据清洗
  5. 数据持久化
  6. 数据可视化

包管理工具

npm包详解

package.json

{"name": "demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies":{"antd":"ant-design/ant-design#4.0.0-alpha.8","axios": "^1.2.0","test-js":"file:../test", // npm link"test2-js":"http://cdn*sSom/test2-js.tar.gz","core-js":"^1.1.5"},"devDependencies": {"eslint": "^5.16.0","eslint-config-airbnb-base": "^13.2.0","eslint-plugin-import": "^2.17.3"},"peerDependencies": {"react":">=16.8.0"},"optionalDependencies":{},"bundledDependencies": ["package1","package2"]
}
name 模块名

name:模块名,需要遵循官方的建议和规范
成为整个模块的url,命令行参数和文件夹相关的名称

在空间下要发模块的话,需要使用@符,像 @abc/def 避免命名重复,类似,作用域命名@babel/cli
查看当前包名是否被占用

npm view xxx(包名)
输出 404 说明没有被占用

npm search xxx 查看包内容
通过正则的方式,返回最匹配的包,以及其他相似的包

npm search xxx --json
通过json的方式返回

description 模块描述信息

description:模块描述信息
在这里插入图片描述
在这里插入图片描述

keywords:关键词

有利于模块的检索
在这里插入图片描述
在这里插入图片描述

homepage:模块首页

在这里插入图片描述

repository:git仓库地址

在这里插入图片描述

private 私有化
"private": true

意味着当前包不能发到 npm 上,对应着version也没有效果

version 包版本

查看最新版本数据 – 用的较多

npm view xxx version

返回所有版本数据

npm view xxx versions

遵循 semver 规范

  1. 发布版本:
    x.y.z
    x— major 主版本,做了不兼容api修改
    y — minor 次版本号,向下兼容,功能性新增
    z — patch 修订号,向下兼容,问题修正

  2. 先行版本:
    alpha 内部版
    beta 内测版
    rc 公测版
    像 1.0.0-beta.0

升级修订号

npm version patch

升级次版本号

npm version minor

升级主版本号

npm version major

比较版本号大小

npm install semver

做版本校验的话,安装 semver 版本包

npm install semver

比较版本号大小,使用semver来比较

依赖配置
  • dependencies 项目运行时所依赖的模板

    • react:^16.8.6
    • react-dom:^16.8.6
  • devDependencies 只在开发环境使用
    eslint jest,线上是不需要的

  • peerDependencies 基础库(很少用),类库,像 antd 限制 react 版本,用react-hook,需要使用16.8.0版本后的版本,那么就可以写成:
    业务项目依赖 demo 安装react 16.8.0以后的版本

     "peerDependencies": {"react":">=16.8.0"},
    
  • optionalDependencies 可选择的依赖,可有可无的(很少用)
    需要注意的是:optionalDependencies中的配置会覆盖 dependencies 中的配置
    那么需要放在optionalDependencies的配置,就不用放在 dependencies 配置中了,只需要配置一个地方即可

  • bundledDependencies 数组,这些模块将在这个包发布的时候,会一起打包

    "bundledDependencies": ["package1","package2"]
    
目录 & 文件项目
"main": "index.js",
  1. main:程序入口的主文件、
    import {xxx} from ‘demo’
  2. bin 命令行工具入口
    像 @babel/cli 中的bin目录
"bin": {"babel": "./bin/babel.js","babel-external-helpers": "./bin/babel-external-helpers.js"},

执行 babel 命令时候,就执行的是 bin 目录下的 babel.js 这个文件内容

  1. 发布配置
    files数组中的内容,推送到服务器
"files":["/dist","/assets","/schema.json","Readme.md"],

npm publish

最终代码目录内容:
在这里插入图片描述

script 脚本命令
  • test:测试脚本
  • dev
  • build
  • publish: pnpm run dev && npm run build 命令组合
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "pnpm run dev","build": "pnpm run build:fast","publish": "pnpm run dev && npm run build"},
依赖版本管理
  • “signale”: “1.4.0”: 固定版本号;
  • “figlet”: “*”: 任意版本(>=0.0.0);
  • “react”: “16.x”: 匹配主要版本(>=16.0.0 <17.0.0);
  • “react”: “16.3.x”: 匹配主要版本和次要版本(>=16.3.0 <16.4.0);
  1. ~
    ~ x.y.z 安装到patch(z)的最新版本
    比如,~16.3.4,安装了16.3.4,下次如果patch的最新是10的话,就安装到 16.3.10 版本,不能安装到 16.4.x 这个版本

  2. ^
    ^x.y.z:保证主版本不变的情况下,保持次版本,修订版本最新版本。
    比如:

    "react-dom":"^16.8.6"
    

    要求,小于17.0.0,大于等于16.8.6等等
    大于等于x.y.z版本,小于最新版本

版本约束文件 package-lock.json

生成lock文件进行版本约束,锁定版本内容
不管什么时候去安装,只要不去进行人为进行修改,那么所依赖的版本号都是固定的

npm install 原理

在这里插入图片描述
早期npm版本(npm 2.x),是通过递归的方式进行包的安装的
npm 3.x,将早期的嵌套结构改为扁平结构

扁平结构还可能碰到幽灵依赖的情况:
例如,显示引入了 buffer,但是 buffer 又依赖了下面两个模块:base64-js 、 ieee754。
在这里插入图片描述
扁平结构使得 base64-js 、 ieee754 这两个的目录结构变成这样:
在这里插入图片描述
这时候,文件中这样写:
import xx from ‘base64-js’;
但是没有显示的引入 base64-js依赖,但是可以去使用,这样的情况就叫做 幽灵依赖
这样是有问题的
以后 buffer 不依赖 base64-js这个了,那么my-app安装时候就没有base64-js了,那么就不能使用base64-js了

解决方案:使用 pnpm

pnpm

performance npm - 高性能的 npm

速度很快 节省磁盘空间的包管理工具
节省空间 提高安装速度

npm的问题:随着时间的堆积,整个工程的体积会非常非常大,因为内部会重复包的情况
像这样:
在这里插入图片描述

怎么做到节省空间,提高安装速度的?

在这里插入图片描述
resolved 处理了 1193 个包,
reused 复用了 1138个包,
downloaded 重新下载了 1个包,
added 0, done

这是由于:
pnpm不是安装到当前目录下的,是安装对应系统的全局目录下面,可以让包进行复用
查看全局目录下的内容

pnpm store path
全局环境 每个项目都是独立的
在这里插入图片描述

利用 软链接(符号链接) 硬链接 来处理

  • 显示的依赖,安装到node_modules下面
  • 间接依赖 安装到 .pnpm 目录下 => 解决幽灵依赖问题,无法跨越层级访问其他包的依赖,只能找当前层级下的内容 无法跨越层级访问其他包的依赖
  • 符号链接(软链接) 相当于快捷方式,更快的访问路径
    在这里插入图片描述
    这里通过软链接的方式,链接的是 .pnpm 目录下的这个包,以 eslint-config-prettier 为例:
    在这里插入图片描述
    而这里 链接的是 pnpm store下的对应文件,通过硬链接的方式

整个过程:
在这里插入图片描述
这也就是pnpm为什么快,并且体积小的原因,也解决了多版本的问题

multirepo vs monorepo

multirepo 传统的方式,单独的仓库,彼此互不影响

monorepo 严格统一 多个项目放到一个仓库里面处理,适用于 底层类库,基础库,多个项目放到一个仓库里去管理,方便统一管理
像babel,vite,react,vue,都是通过monorepo,将相似的包都放在一个仓库当中,便于整体维护
每个包都是单独的npm模块,都可以单独发包
在package.json入口层面上,可以统一管理相关的打包,发布,部署

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/72413.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Python实战进阶》No24: PyAutoGUI 实现桌面自动化

No24: PyAutoGUI 实现桌面自动化 摘要 PyAutoGUI 是一个跨平台的桌面自动化工具&#xff0c;能够模拟鼠标点击、键盘输入、屏幕截图与图像识别&#xff0c;适用于重复性桌面任务&#xff08;如表单填写、游戏操作、批量文件处理&#xff09;。本集通过代码截图输出日志的实战形…

一周学会Flask3 Python Web开发-SQLAlchemy查询所有数据操作-班级模块

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 我们来新建一个的蓝图模块-班级模块&#xff0c;后面可以和学生模块&#xff0c;实现一对多的数据库操作。 blueprint下新建g…

Neural Architecture Search for Transformers:A Survey

摘要 基于 Transformer 的深度神经网络架构因其在自然语言处理 (NLP) 和计算机视觉 (CV) 领域的各种应用中的有效性而引起了极大的兴趣。这些模型是多种语言任务&#xff08;例如情绪分析和文本摘要&#xff09;的实际选择&#xff0c;取代了长短期记忆 (LSTM) 模型。视觉 Tr…

TCP 全连接队列 内核层理解socket

TCP 全连接队列 理解 listen 的第二个参数 int listen(int sockfd, int backlog);backlog 参数表示 全连接队列&#xff08;accept 队列&#xff09;的最大长度。 那什么是全连接队列呢&#xff1f; 三次握手 & accept() 处理流程 客户端发送 SYN&#xff0c;服务器收到并…

OpenEuler-22.03-LTS上利用Ansible轻松部署MySQL 5.7

一、需求 使用ansible自动化部署mysql二进制部署mysql部署mysql并创建JDBC用户 二、环境信息 本文涉及的代码&#xff0c;配置文件地址&#xff1a; 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;1g6y 软件名称版本备注Ansible2.9.27All modules — Ansible Doc…

基于javaweb的SpringBoot农资商城购物商城系统设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…

angular打地鼠

说明&#xff1a;我计划用angular做一款打地鼠的小游戏&#xff0c; 打地鼠游戏实现文档 &#x1f3ae; 游戏逻辑 ​游戏场景 采用 3x3 网格布局的 9 个地鼠洞​核心机制 地鼠随机从洞口弹出点击有效目标获得积分30 秒倒计时游戏模式 ​难度系统 简单模式&#xff1a;生成间…

博客网站(springboot)整合deepseek实现在线调用

&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389; 欢迎访问的个人博客&#xff1a;https://swzbk.site/&#xff0c;加好友&#xff0c;拉你入福利群 &#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389; 1、de…

Kubernetes 单节点集群搭建

Kubernetes 单节点集群搭建教程 本人尝试基于Ubuntu搭建一个单节点K8S集群&#xff0c;其中遇到各种问题&#xff0c;最大的问题就是网络&#xff0c;各种镜像源下载不下来&#xff0c;特此记录&#xff01;注意&#xff1a;文中使用了几个镜像&#xff0c;将看来可能失效导致安…

专题三0~n-1中缺失的数字

1.题目 给一个数组&#xff0c;单调性是递增的&#xff0c;需要找到缺失的数字&#xff0c;加上这个数字就变为等差数组了。 2.算法原理 这里用二分来解决&#xff0c;而二段性是根据下标区分&#xff0c;临界值前的数字于下标相对应&#xff0c;临界值后的于下标相差1&#x…

【图像处理】ISP(Image Signal Processor) 图像处理器的用途和工作原理?

ISP&#xff08;图像信号处理器&#xff09;是数字影像设备的“视觉大脑”&#xff0c;负责将传感器捕获的原始电信号转化为我们看到的高清图像。以下从用途和工作原理两方面通俗解析&#xff1a; 一、ISP的核心用途&#xff1a;让照片“更像眼睛看到的” 提升画质&#xff1a…

python学习笔记-mysql数据库操作

现有一个需求&#xff0c;调用高德api获取全国县级以上行政区数据并保存为json文件&#xff0c;使用python获取&#xff1a; import requests import json# 高德API Key api_key "your_api_key"# 调用行政区域查询API def fetch_districts():url f"https://r…

Redisson 实现分布式锁源码浅析

大家好&#xff0c;我是此林。 今天来分享Redisson分布式锁源码。还是一样&#xff0c;我们用 问题驱动 的方式展开讲述。 1. redis 中如何使用 lua 脚本&#xff1f; Redis内置了lua解释器&#xff0c;lua脚本有两个好处&#xff1a; 1. 减少多次Redis命令的网络传输开销。…

【软件】免费的PDF全文翻译软件,能保留公式图表的样式

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 很多PDF全文翻译软件都是收费的&#xff0c;而划线翻译看着又很累。这个开源的PDF全文翻译软件非常好用&#xff0c;并且能够保留公式、图表、目录和注…

PentestGPT 下载

PentestGPT 下载 PentestGPT 介绍 PentestGPT&#xff08;Penetration Testing GPT&#xff09;是一个基于大语言模型&#xff08;LLM&#xff09;的智能渗透测试助手。它结合了 ChatGPT&#xff08;或其他 GPT 模型&#xff09;与渗透测试工具&#xff0c;帮助安全研究人员自…

防火墙虚拟系统实验

一实验拓扑 二实验过程 配置资源 创建虚拟系统 配置管理员 创建安全策略

Linux与深入HTTP序列化和反序列化

深入HTTP序列化和反序列化 本篇介绍 在上一节已经完成了客户端和服务端基本的HTTP通信&#xff0c;但是前面的传递并没有完全体现出HTTP的序列化和反序列化&#xff0c;为了更好得理解其工作流程&#xff0c;在本节会以更加具体的方式分析到HTTP序列化和反序列化 本节会在介绍…

基于Python+SQLite实现(Web)验室设备管理系统

实验室设备管理系统 应用背景 为方便实验室进行设备管理&#xff0c;某大学拟开发实验室设备管理系统 来管理所有实验室里的各种设备。系统可实现管理员登录&#xff0c;查看现有的所有设备&#xff0c; 增加设备等功能。 开发环境 Mac OSPyCharm IDEPython3Flask&#xff…

深拷贝and浅拷贝!

一、什么是拷贝&#xff1f;什么是深拷贝和浅拷贝&#xff1f; &#xff08;1&#xff09;拷贝&#xff1a;拷贝就是为了复用原对象的部分or全部数据&#xff0c;在原对象的基础上通过复制的方式创建一个新的对象。 拷贝对象可以分为三种类型&#xff1a;直接赋值、浅拷贝和深拷…

高频面试题(含笔试高频算法整理)基本总结回顾43

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…