移动端和PC端对比【组件库+调试vconsole +单位postcss-pxtorem+构建vite/webpack+可视化echarts/antv】

目录

组件库

移动端

vue

vant

PC端

react

antd

vue

element

调试:vconsole vs dev tools中的控制台(Console)

vconsole:在真机上调试

postcss-pxtorem:移动端不同的像素密度

构建工具

webpack

原理

Babel:JS编译器(es6->es5,jsx->js)

loader:编译

less-loader:less->css

css-loader:css->js

style-loader:创建style标签,将js中的样式资源插入标签内,并将标签添加到head中生效

ts-loader:打包编译Typescript文件

plugin:压缩

html-webpack-plugin :处理html资源,默认会创建一个空的HTML,自动引入打包输出的所有资源(js/css)

mini-css-extract-plugin: 打包过后的css在js文件里,该插件可以把css单独抽出来

clean-webpack-plugin :每次打包时候,CleanWebpackPlugin 插件就会自动把上一次打的包删除

loader和plugin的区别:loader运行在编译阶段,plugins 在整个周期都起作用

热加载原理:实时看到代码变化

懒加载

vite(快,简,小)

源文件的处理

resolve :解析 url,找到源文件的绝对路径;

load :加载源文件。

第三方依赖:直接将预构建内容返回给浏览器;

业务代码:继续 transform、parser。

transfrom :对源文件内容做转换,即 ts -> js, less -> css 等。转换完成的内容可以直接返回给浏览器了。

parser: 对转换以后的内容做分析,找到依赖模块,对依赖模块做预转换 - pre transform 操作,即重复 1 - 4。

快:启动/热更新

ESM+unbundle

性能下降:大量http请求,按需动态编译

首屏

可视化引擎


 移动端需要考虑:轻量级,单位

类似参考链接:搭建一个vue-cli4+webpack移动端框架(开箱即用) - 掘金

组件库

移动端

vue

vant

PC端

react

antd

vue

element

调试:vconsole vs dev tools中的控制台(Console)

vconsole:在真机上调试

浏览器中显示log和调试信息的 JS 库

 npm install vconsole

import VConsole from 'vconsole';
if (import.meta.env.MODE === 'development') {const vConsole = new VConsole();Vue.prototype.vconsole = vConsole //把这个方法放到vue原型上,方便在页面中调用 
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

postcss-pxtorem:移动端不同的像素密度

yarn add postcss-pxtorem

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==编辑

构建工具

ctrl+c终止运行(webpack需要重启,vite不需要)

webpack

它将根据模块的依赖关系进行静态分析,然后将这些模块( js、css、less )按照指定的规则生成对应的静态资源减少了页面的请求。Webpack是以公共JS的形式来书写脚本的,方便旧项目进行代码迁移

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== 编辑

原理

Webpack通过一个给定的主文件(如:index.js)开始找到项目的所有依赖文件,

使用loaders处理它们,plugin可以压缩代码和图片

把所有依赖打包成一个 或多个bundle.js文件(捆bundle)浏览器可识别的JavaScript文件。

Babel:JS编译器(es6->es5,jsx->js)

将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法,即浏览器兼容的语法,比如将箭头函数转换为普通函数

将jsx转换成浏览器认的js

loader:编译

webpack只认识JS和JSON,所以Loader相当于翻译官,将其他类型资源进行预处理,最终变为js代码。

less-loader:less->css

开发中,会使用less预处理器编写css样式,使开发效率提高)

css-loader:css->js

将css文件变成commonjs模块(模块化的规范)加载到js中,模块内容是样式字符串

style-loader:创建style标签,将js中的样式资源插入标签内,并将标签添加到head中生效
ts-loader:打包编译Typescript文件
plugin:压缩

Plugin解决loader 无法实现的事情,比如打包优化代码压缩等。

html-webpack-plugin :处理html资源,默认会创建一个的HTML,自动引入打包输出的所有资源(js/css)
mini-css-extract-plugin: 打包过后的css在js文件里,该插件可以把css单独抽出来
clean-webpack-plugin :每次打包时候,CleanWebpackPlugin 插件就会自动把上一次打的包删除
loader和plugin的区别:loader运行在编译阶段,plugins 在整个周期都起作用

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== 编辑
热加载原理:实时看到代码变化

热加载是通过内置的 HotModuleReplacementPlugin 实现的

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==编辑

  1. 构建 bundle 的时候,监听文件变化。
  2. 文件修改会触发 webpack 重新构建
  3. 服务器通过向浏览器发送更新消息
  4. 浏览器通过 jsonp 拉取更新的模块文件,
  5. jsonp 回调触发模块热替换逻辑。Vite把需要在启动过程中完成的工作,转移到响应浏览器请求的过程中

之后reload页面时,首屏的性能会好很多(缓存

懒加载

动态加载的文件,需要做 resolve、load、transform、parse 操作,并且还有大量的 http请求

vite(快,简,小)

源文件的处理

resolve :解析 url,找到源文件的绝对路径;
load :加载源文件。
第三方依赖:直接将预构建内容返回给浏览器;
业务代码:继续 transformparser
transfrom :对源文件内容做转换,即 ts -> jsless -> css 等。转换完成的内容可以直接返回给浏览器了。
parser: 对转换以后的内容做分析,找到依赖模块,对依赖模块做预转换 - pre transform 操作,即重复 1 - 4

pre transform 是 Vite 做的一个优化点。预转换的内容会先做缓存,等浏览器发起请求以后,如果已经完成转换,直接将缓存的内容返回给浏览器。

快:启动/热更新

ESM+unbundle

(ES modules 是 JavaScript 官方的标准化模块系统。)

vite源文件之间的依赖通过浏览器对 ESM 规范的支持来解析,不再需要额外打包处理。

请求模块时按需动态编译显示

webpack启动慢主要是因为模块依赖图 - module graph

构建 module graph 的过程中,涉及到大量的文件 IO、文件 transfrom、文件 parse 操作;

分解 module graph 的过程中,需要遍历 module graph、文件 transform、文件 IO 

性能下降:大量http请求,按需动态编译

首屏

不对源文件做合并捆绑操作,导致大量的http请求 dev server运行期间对源文件做resolve、load、transform、parse操作 预构建、二次预构建操作也会阻塞首屏请求,直到预构建完成为止

可视化引擎

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

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

相关文章

Linux 进程层次分析

Linux 进程组 每个进程都有一个进程组号 (PGID) 进程组:一个或多个进程的集合 (集合中的进程并不孤立)进程组中的进程通常存在父子关系,兄弟关系,或功能相近 进程组可方便进程管理 (如:同时杀死多个进程,发送一个信…

RISC-V 基础指令汇总

加载指令 存储指令 PC寻址指令 auipc rd, imm这条指令把 imm (立即数)左移12位并带符号扩展到64位后,得到一个新的立即数,这个新的立即数是一个有符号的立即数,再加上当前 PC 值,然后存储到 rd 寄存器中。…

解释器风格架构C# 代码

/*解释器风格架构是一种基于组件的设计架构,它将应用程序分解为一系列组件,每个组件负责处理特定的任务。这种架构有助于提高代码的可维护性和可扩展性。以下是如何使用C#实现解释器风格架构的步骤:定义组件:首先,定义…

表的增删改查

文章目录 1. Create(创建)1.1 insert1.2 插入否则更新1.3 替换 2. Retrieve(查询)2.1 SELECT 列2.2 WHERE 条件2.3 结果排序2.4 筛选分页结果 3. Update(更新)4. Delete(删除)4.1 删除数据4.2 截断表 5. 插入查询结果 1. Create(创建) 1.1 insert 下面我们用这个表来操作&…

【算法分析与设计】动态规划(上)

目录 一、学习要点二、算法总体思想三、动态规划基本步骤四、矩阵连乘问题4.1 完全加括号的矩阵连乘积4.2 穷举法4.3 动态规划4.3.1 分析最优解的结构4.3.2 建立递归关系4.3.3 计算最优值4.3.4 用动态规划法求最优解 五、动态规划算法的基本要素5.1 最优子结构5.2 重叠子问题5.…

采集SEO方法-优化内链与外链建设

采集大量的文章数据,要想批量做SEO优化添加内链外链方法,可以使用简数采集器的处理规则实现。 简数采集器的一个处理规则,可以包含多种SEO方法,还可自由组合,强大灵活方便。 优化内链外链的SEO技巧: 1&a…

新手教程,蛋糕小程序的搭建流程一网打尽

作为一名新手,想要搭建一个蛋糕小程序可能会觉得有些困惑。但是,不用担心!今天我将为大家详细介绍蛋糕小程序的搭建流程,并带大家一步步完成。 首先,我们需要登录乔拓云网的后台。在登录成功后,点击进入商城…

python使用mitmproxy和mitmdump抓包在手机上抓包(三)

现在手机的使用率远超过电脑,所以这篇记录用mitmproxy抓手机包,实现手机流量监控。 环境:win10 64位,Python 3.10.4,雷电模拟器4.0.78,android版本7.1.2(设置-拉至最底部-关于平板电脑&#xf…

多线程总结(线程池 线程安全 常见锁)

本篇文章主要是对线程池进行详解。同时引出了单例模式的线程池,也对线程安全问题进行了解释。其中包含了智能指针、STL容器、饿汉模式的线程安全。也对常见的锁:悲观锁(Pessimistic Locking)、乐观锁(Optimistic Locki…

DevOps持续集成与交付

概述 Jenkins是一个支持容器化部署的、使用Java运行环境的开源软件,使用Jenkins平台可以定制化不同的流程与任务、以自动化的机制支持DevOps领域中的CI与CD,在软件开发与运维的流程中自动化地执行软件工程项目的编译、构建、打包、测试、发布以及部署&a…

使用Vue-cli构建spa项目及结构解析

一,Vue-cli是什么? 是一个官方发布的Vue脚手架工具,用于快速搭建Vue项目结构,提供了现代前端开发所需要的一些基础功能,例如:Webpack打包、ESLint语法检查、单元测试、自动化部署等等。同时,Vu…

qml保姆级教程一:布局组件

💂 个人主页:pp不会算法v 🤟 版权: 本文由【pp不会算法v】原创、在CSDN首发、需要转载请联系博主 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 QML系列教程 QML教程一:布局组件 文章目录 锚布局anchors属…

JVM——11.JVM小结

这篇文章我们来小结一下JVM JVM,即java虚拟机,是java代码运行时的环境。我们从底层往上层来说,分别是硬件部分,操作系统,JVM,jre,JDK,java代码。JVM是直接与操作系统打交道的。JVM也…

基于复旦微的FMQL45T900全国产化ARM开发开发套件(核心板+底板)

TES745D是我司自主研制的一款基于上海复旦微电子FMQL45T900的全国产化ARM核心板(模块)。该核心板将复旦微的FMQL45T900(与XILINX的XC7Z045-2FFG900I兼容)的最小系统集成在了一个87*117mm的核心板上,可以作为一个核心模…

进入IT行业:选择前端开发还是后端开发?

一、前言 开发做前端好还是后端好?这是一个常见的问题,特别是对于初学者来说。在编程世界中,前端开发和后端开发分别代表着用户界面和数据逻辑,就像城市的两个不同街区一样。但是,究竟哪个街区更适合我们作为开发者呢…

yolox相关

yolox YOLOXYOLOX-DarkNet53yolov3作为baseline输入端Strong data augmentationMosaic数据增强MixUp数据增强注意 BackboneNeckPrediction层Decoupled headDecoupled Head 细节 Anchor-freeAnchor Based方式Anchor Free方式标签分配初步筛选精细化筛选 SimOTASimOTA Other Back…

「UG/NX」Block UI 从列表选择部件SelectPartFromList

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#

DDS信号发生器波形发生器VHDL

名称:DDS信号发生器波形发生器 软件:Quartus 语言:VHDL 要求: 在EDA平台中使用VHDL语言为工具,设计一个常见信号发生电路,要求: 1. 能够产生锯齿波,方波,三角波&…

【开发篇】十二、缓存框架JetCache

文章目录 0、介绍1、JetCache远程缓存2、JetCache本地缓存3、标准配置文件4、JetCache方法缓存注解--Cached5、Cached4、CacheUpdate5、CacheInvalidate6、CacheRefresh7、缓存统计报告 上篇完成了Spring Cache底层技术的各种切换,但各个技术有各自的优缺点&#xf…

STM32G070RBT6-MCU温度测量(ADC)

1、借助STM32CubeMX生成系统及外设相关初始化代码。 在以上配置后就可以生成相关初始化代码了。 /* ADC1 init function */ void MX_ADC1_Init(void) {/* USER CODE BEGIN ADC1_Init 0 *//* USER CODE END ADC1_Init 0 */ADC_ChannelConfTypeDef sConfig {0};/* USER COD…