前端技术站
文章平均质量分 91
奋飛
乐观、勇气、专注、果断、好奇、公正、慎思、真诚、追求极致追求完美、诚信!独立撰写了多个前端专题模块,访问量达百万级。多次负责组织大数据可视化前端架构平台开发工作。对前端新技术、新潮流具有很强的敏锐力和洞察力!
展开
-
npm vs pnpm 之幽灵依赖
项目使用 npm 安装依赖可以正常运行,而使用 pnpm 安装依赖运行报错!使用 npm 安装,所有依赖都被提升到了 node_modules 下(npm@3之后的依赖扁平化,解决路径地狱);使用 pnpm 安装,只有直接依赖(package.json dependences 中声明)安装在 node_modules 下,其他在 .pnpm(扁平化) 目录下。原创 2024-08-07 11:15:53 · 950 阅读 · 0 评论 -
如何构建自己的技术博客
拥有自己的技术博客,不仅可以提升自己的技术能力,还可以提升自己的影响力,未来也可能带来一些“睡后”收益。对于我们职场人来说,拥有自己的技术博客一方面可以总结沉淀自己所学内容,同时也是一个不错的加分项。Vuepress 以 Markdown 为中心的项目结构,可以专注于写作,同时结合 Github 提供的用于搭建个人网站的静态站点托管服务。原创 2023-08-31 18:39:36 · 396 阅读 · 0 评论 -
三款快速删除未使用CSS代码的工具
针对历史项目或项目中有引入CSS框架(如Bootstrap),可能会存在大量的 CSS 样式未被使用。这可能产生一些不良的影响,如: 增加额外加载时间、可维护性下降。推荐PurgeCSS、UnCSS、PurifyCSS三款工具,自动去除未使用CSS代码。原创 2023-08-11 18:00:28 · 1376 阅读 · 0 评论 -
发明专利公开 -- 一种基于 JSON 文件 + Http Header 的支持多项目、多分支、多人协同的 Api Mock/代理 工具
现阶段主流的前后端分离的开发模式下:前后端采用并行开发方式,在前端开发过程中通常需要依附于共同约定的接口格式及数据。该过程是一个并行过程,因此 Api Mock 模拟接口的返回变成了必要。同时,联调过程中,修改后端服务地址进行联调也是必要的。现公布团队的解决方案,也是团队 21 年专利的一项内容(专利公布号:CN113630468A)。原创 2023-05-30 16:17:25 · 1579 阅读 · 0 评论 -
文从字顺|程序员须知,如何编写高质量代码
高质量代码是软件开发中至关重要的一部分。高质量的代码不仅可以提高软件的可维护性和可复用性,还可以增强软件的安全性和稳定性。同时,可以降低软件维护成本,提升开发效率,为用户提供更好的使用体验。写出高质量代码是每个程序员追求的终极目标。原创 2023-05-06 13:25:59 · 751 阅读 · 0 评论 -
setTimeout不准时,CSS精准实现计时器功能
实际开发过程中,我们会经常遇到,首次进入页面进行相应提示,然后指定时间后自动消失或者前端时钟展示等需求。按照传统方案,我们可以使用 setTimeout 实现。但其存在:实际延时比设定值更久的情况。原创 2023-05-04 10:32:13 · 1018 阅读 · 0 评论 -
你真的了解 browserslist 吗?一文彻底搞懂
关于 Browserslist 大家一定都不陌生,在现有前端工程都会有它的身影。Browserslist 帮助我们在浏览器兼容性和包大小之间保持适当的平衡。使用 Browserslist,可以做到覆盖更广泛的受众(浏览器),同时包的体积也会保持最小化。通过下述内容,我们一一解答。原创 2023-03-29 18:01:49 · 1248 阅读 · 0 评论 -
webpack dll 提升构建速度
DLL,动态链接库(Dynamic Link Library 或者 Dynamic-link Library),由微软公司提出。目的是为了节约应用程序所需的磁盘和内存空间。在一个传统的非共享库中,如果两个程序调用同一个子程序,就会出现两份那段代码。让多个应用共享的代码切分到一个DLL中,在硬盘上存为一个文件,在内存中使用一个实例(instance)。DllPlugin 和 DllReferencePlugin 用某种方法实现了拆分 bundles,同时还大幅度提升了构建的速度。原创 2023-03-08 17:38:19 · 698 阅读 · 0 评论 -
一图说明 monorepo 落地流程方案
上图为目前团队贡献的主流程:① 本地开发 => ② 提交Git仓库 => ③ 触发 gitlab CI/CD => ④ 发布。关于 monorepo 初次讨论已有2年载,目前团队已经沉淀了成熟的技术方案且经受住了实战考验。原创 2023-02-20 11:51:28 · 479 阅读 · 0 评论 -
一文搞懂SOLID原则(javascript)
SOLID 是面向对象编程重要的原则,javascript 作为面向对象开发的语言之一,掌握这些原则,可以写出更优雅的代码。SOLID 由 Robert C. Martin(其被誉为世界编程大师,设计模式、敏捷开发先驱)在21世纪初定义。采用 SOLID 编程,可以让代码的。ingle Responsibility Principle:单一职责原则pen Closed Principle:开闭原则iskov Substitution Principle:里氏替换原则。原创 2023-02-09 10:51:07 · 517 阅读 · 0 评论 -
Web Workers RPC:Comlink 源码解析
上篇文章,有提及 Web Workers RPC 以解决浏览器不阻塞UI的问题,其中 comlink 是一把利器,本文就 comlink 的关键源码进行解析。Comlink 通过提供 RPC 实现将基于的 API 变成了对开发人员更友好的“类似本地调用”方式。原创 2022-10-24 11:42:33 · 1448 阅读 · 0 评论 -
Web Workers RPC
Comlink(RPC方式)使我们可以更多的关注业务内容,忽略调用(网络)细则。客户端应用程序调用本地存根(stub),而不是调用实际代码;服务端应用程序接受参数,通过服务器存根(stub)检索实际代码进行运行。原创 2022-09-21 10:09:46 · 1960 阅读 · 0 评论 -
巧用 import.meta 实现热更新
Pinia 是 vuex 新替代方案。Pinia 中热更新实现,借助 import.meta。原创 2022-04-15 13:47:38 · 6382 阅读 · 0 评论 -
web 通信--跨文档、worker、通道
跨文档通信(cross-document messaging)、worker通信(cross-worker messaging)、通道通信(channel messaging)MessageEvent消息事件 MessageEvent() 用于:Cross-document messaging (参见 Window.postMessage() 和 Window.onmessage).Channel messaging (参见 MessagePort.postMessage() (en-US) 和M原创 2022-01-23 20:14:36 · 1141 阅读 · 1 评论 -
前端新的构建范式
前端的交付基于浏览器,资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,是前端发展中一直探索的难题。模块化 这个词大家一定有所熟知。模块的产生就是为了解决前端日趋复杂,从而加载越来越多资源而产生的问题。最终目的是为了提高生产力!前端模块发展历程:前端模块化系统模块化发展到今天,其基本的范式为:利用 bundle 工具(如 webpack)将源码打包成浏览器可识别的 bundle。范式从本质上讲是一种理论体系、理论原创 2021-09-26 18:35:26 · 896 阅读 · 1 评论 -
果断放弃npm切换到pnpm--节约磁盘空间(256G硬盘救星)
团队成立初期我们采用 npm3 来管理项目依赖,后续我们研发了自己组件库、图表库、工具库,采用了 monorepo 管理,依赖管理也由 npm3 切换成了 yarn(yarn workspace)。不管是 npm3 还是 yarn 都采用扁平化的 node_modules 文件夹方式,以此避免引入层级过深、相同依赖版本重复等问题。随着公司业务不断壮大,团队支撑的项目越来越多。由于依赖是跟随项目的,导致磁盘空间占用严重。由于上述原因,开始尝试使用 pnpm 来进行管理。节约磁盘空间pnpm 依赖项将存原创 2021-09-09 14:14:11 · 2097 阅读 · 4 评论 -
10分钟搞定硬链、软链
对于软链、硬链的内容整理,是为后续 pnpm 的内容做准备。示例:cd /Users/ligang/Documents/github/practice/links/sources# 在测试目录下创建相应的测试文件touch test.js && echo "console.log('links')" > test.jsinode查看文件信息(inode)ls -li test.js8643193659 -rw-r--r-- 1 ligang staff 21原创 2021-09-05 22:59:54 · 957 阅读 · 6 评论 -
前端打包工具Esbuild--模块化、ESM、esbuild-loader、
模块化编程在前端领域已非常普遍,应用程序中将各种功能细分成独立的模块(单独文件)进行开发。module bundler 将所有文件串联起来变成了必须。JavaScript 社区中有很多程序的打包工具,如 Webpack、Rollup、Parcle 等,它们都是使用 JavaScript 构建的,性能方面有很多不足。下面要介绍的 Esbuild,采用 Go 语言开发,运行速度得到了显著提高。Esbuild 也被称为下一代构建工具(使用 Go 语言编写,基于 ESM)。esbuild:An extrem原创 2021-07-17 20:56:51 · 19143 阅读 · 10 评论 -
性能调优--gzip、缓存、content-download、逐针渲染、Queueing、动态延迟加载、最小化主线程工作
本文主要讲述,关于 Chrome Content Download 时间过长问题调查经过,及相关优化方案chunk-136cc8c0.js 是上图地图 geojson,587 kB 用了 1.01s,作为系统首页,会导致中间地图(视觉中心)出现长时间的空白,对于用户体验来说,极其不友好。怀疑一:是不是网络环境不好导致?在开发环境下运行(本地)也会出现类似情况,且更重要的是 chunk-7182b1fa.js 933kB 才用了 35ms。因此可以排除网络坏境导致。怀疑二:缓存导致?某些 chun原创 2021-06-22 18:55:16 · 2579 阅读 · 1 评论 -
你问的Svelte来了--静态编译、直出DOM、独立分发Web Components、位掩码变化追踪
SvelteSvelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作,而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。与使用虚拟(virtual)DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。上述是官方的介绍,提取关键词:用户界面的方法:定位是UI框架。编译阶段处理: Svelte 直接将模板编译成了原生 DOM,而 vue 等框架会将模板编译成虚拟DOM;浏览器支持原生原创 2021-06-15 18:52:56 · 1445 阅读 · 4 评论 -
source map 你知道多少?-- 调试、原理、渗透、还原源码
压缩 css 和 javascript 代码,是一种简单且见效明显的的提高 web 性能的方式。但是,当需要调试这些压缩文件中的代码时变成了“噩梦”。source map 是解决该问题的方式之一,其提供了一种将压缩文件中的代码映射回源文件中的原始位置的方法。Chrome 和 Firefox 开发人员工具都附带了对 source map 的内置支持,这意味着,即使在压缩后,也可以轻松地调试应用程序。注意:Firefox:开发人员工具默认启用对源地图的支持;Chrome:手动启用支持。启动Chrome原创 2021-05-22 23:08:06 · 3857 阅读 · 14 评论 -
掌握 AST,轻松落地关键业务
如果你查看目前任何主流的项目中的 devDependencies,我们不会在生产环境用到,但是它们在开发过程中充当着重要的角色。归纳一下有:javascript转译、代码压缩、css预处理器、elint、pretiier,postcss等。所有的上述工具,不管怎样,都建立在了AST这个巨人的肩膀上,都是 AST 的运用:编辑器的错误提示、代码格式化、代码高亮、代码自动补全;elint、pretiier 对代码错误或风格的检查;webpack 通过 babel 转译 javascript 语法;.原创 2020-09-24 13:18:53 · 905 阅读 · 0 评论 -
WebAssembly 小 Demo
意义WebAssembly 是一种新的编码方式,可以在现代的网络浏览器中运行 — 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如 C/C++ 等语言提供一个编译目标,以便它们可以在Web上运行。WebAssembly 被设计为可以和 JavaScript 一起协同工作 — 通过使用 WebAssembly 的 JavaScript API,你可以把 WebAssembly 模块加载到一个 JavaScript 应用中并且在两者之间共享功能。这允许你在同一个应用中利用 W原创 2020-09-15 13:25:00 · 1237 阅读 · 2 评论 -
内网畅外网墙--再聊Nginx访问权限管理
接上回,Nginx访问权限管理low address bits of 192.168.101.0/16 are meaningless in /usr/local/nginx/conf/nginx.conf:122location / { allow 192.168.101.0/24; deny all; ...}网关网关在网络层以上实现网络互连,是复杂的网络互连设备。网关既可以用于广域网互连,也可以用于局域网互连。A:IP地址范围 192.168.1.1~192. 168.原创 2020-07-21 15:45:47 · 2692 阅读 · 0 评论 -
10 分钟了解 webpack 核心内容
10 分钟了解 webpack 核心内容直接上手稿了Tapable 是 webpack 核心工具之一,提供了插件接口。webpack 中许多对象扩展自 Tapable 类(如,负责编译的 Compiler 和负责创建 bundles 的 Compilation)。这个类暴露 tap, tapAsync 和 tapPromise 方法,可以使用这些方法,注入自定义的构建步骤,这些步骤将在整个编译过程中不同时机触发。Compiler.js#L104 每一个事件钩子决定了它该如何应用插件的注册cla.原创 2020-07-11 18:37:23 · 440 阅读 · 0 评论 -
从npm、npx说起,到shell
背景:目前整个我们前端工程栈有多处 CLI(包括工具、模板等等),CLI 带来了巨大的便利性,但其在 Windows 下执行往往和 Mac/Unix 系统下表现不同。今天想从 npm run <command> 命令开始,尽可能的阐述一下整条链~~~npmscript项目的相关脚本,可以集中在一个地方(这里指入口)以利用 npm 提供的很多辅助功能,以及不同项目的脚本命令,只要功能相同,就可以有同样的对外接口(如 npm run test,不管是 mocha 还会 jasmine.原创 2020-06-12 15:37:02 · 1125 阅读 · 0 评论 -
npm并行&串行执行多个scripts命令
通过npm run <commander> 可以运行 package.json 中脚本,Npm 命令不能提供立即运行多个脚本的方式,同时运行需要打开多个终端窗口npm scriptsnode_modules/.bin 目录下的命令,可以直接在 scripts 中调用利用一些脚本生命周期时间"scripts": { "preinstall": "./configure...原创 2020-05-03 22:17:33 · 11024 阅读 · 4 评论 -
monorepo--依赖
19年,团队沉淀了组件库、图表库、工具库等基础建设相关内容。上述的内容均为独立工程维护,起初我们采用 Git Subtree + npm install <folder> 来关联各个项目,带来了开发、调试的便利,同时也带了一些复杂性。11月份,整个底层稳定性显著提高,宿主项目中调试等已不是主要问题;我们的新成员 fusion-utils 诞生,由于 fusion-charts 和 f...原创 2020-01-15 10:39:32 · 3753 阅读 · 1 评论 -
vscode中调试vue工程
在 debug 时,通常的方式如下几种:源代码中增加 debugger 或者 console.log在 Chrome 浏览器 Sources 中加断点vscode 中直接调试,对源码定位准确直观(下面阐述该种方式)以 Chrome 浏览器为例,其他浏览器类似。第一步: 首先确保 Chrome浏览器已正确安装,并在 vscode 中添加 vscode-chrome-debug ...原创 2019-11-28 22:13:38 · 2449 阅读 · 0 评论 -
前端架构--从入门到微前端
年中,自己做规划(2019Thinking(上) – 一个前端开发者的个人思考)时,考量了一段时间「微前端」,也关注到了《微前端的那些事儿》的文章,从而了解了作者「黄峰达」,也就购买了下面将要聊的书《前端架构:从入门到微前端》本书围绕前端架构的实施,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。设计:架构设计的模式,以及设计和制定前端工作流基础:通过深入构...原创 2019-11-18 22:23:35 · 4757 阅读 · 1 评论 -
前端优化--使用JavaScript添加交互
接本系列「关键渲染路径」「阻塞渲染的 CSS」,浏览器大致经过了:构建 DOM 树、构建 CSSOM 树、构建渲染树、布局、绘制五个步骤。CSS 的渲染是阻塞的, 除了上篇讲述媒体查询可以只让 CSS 先加载后渲染,还有什么影响着 CSS 渲染呢?这里主要简述,JavaScript 对 DOM 及 CSSOM 影响相关!JavaScript 允许我们修改网页的方方面面:内容、样式以...原创 2019-10-24 09:34:59 · 641 阅读 · 0 评论 -
前端优化--阻塞渲染的CSS
接上一篇「关键渲染路径」,浏览器大致经过了:构建 DOM 树、构建 CSSOM 树、构建渲染树、布局、绘制五个步骤。这里主要简述,构建 CSSOM 相关!默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。请务必精简您的 CSS,尽快提供它,并利用媒体类型和查询来解除对渲染的阻塞。在 渲染树构建(可查看上篇文章) 中,我们...原创 2019-10-12 09:25:24 · 872 阅读 · 0 评论 -
Babel6
最近,公司Node项目正式切换为了Koa2,正式启用了ES6,然而一些语法(如,import)在Node6版本中并未支持。所以我们需要使用Babel进行转换,目前我们采用了Babel6去实现转换。一、Babel6的由来默认情况下,Babel自带了一组ES2015语法转换器。这些转换器能让你现在就使用最新的JavaScript语法,而不用等待浏览器或Node提供支持。同时,Babel内嵌了对JSX的原创 2017-01-23 08:20:52 · 3337 阅读 · 2 评论 -
Grunt常用插件及示例说明
下述给出了常用Grunt插件,并列举了部分插件示例。grunt-text-replace 使用字符串、正则、函数替换文本内容;grunt-filerev 文件加MD5摘要,grunt-filerev-replace 替换通过grunt-filerev的文件引用。原创 2016-12-21 19:17:19 · 6063 阅读 · 0 评论 -
剖析Grunt任务配置
之前博客中大致描述过“前端自动化构建工具Grunt”及“grunt[mismatched:define]”等信息。然而,并没有深入;下述内容,将深入剖析Grunt Files处理方式、配置项、自定义插件。一、准备工作A. 通过npm init在项目根目录下生成package.json; B. 通过npm install grunt --save-dev 安装grunt依赖; C. 项目根目原创 2016-12-18 23:02:34 · 3471 阅读 · 0 评论 -
使用Node.js构建命令行工具
使用Node.js和npm构建脚本或命令行工具。一、包装shell命令第一步:创建一个npm项目npm init;第二步:创建一个js文件(index.js),包含要运行的脚本!/usr/bin/env nodeconsole.log('Hello, world!');需要注意的是,需要添加片段标识符“!/usr/bin/env node”,告知脚本使用Node执行。 第三步:在package原创 2016-11-22 18:08:00 · 10224 阅读 · 5 评论 -
grunt[mismatched:define]
最近,在做项目优化,想将用到的jquery.js、bootstrap.js、angular.js、angular-ui-router.js、validator.js以及require.js做all in one(统一合并为一个文件),已减少http的请求数量。然而,在合并的过程中,报错: Uncaught Error: Mismatched anonymous define() module:原创 2016-01-10 18:26:45 · 3086 阅读 · 0 评论 -
前端自动化构建工具Grunt
一、了解GurntGrunt 是一个基于任务的JavaScript工程命令行构建工具。Grunt和Grunt插件,是通过npm安装并管理的,npm是Node.js的包管理器。了解Grunt前,首先要准备两件事:1、了解npm(Node Package Manager):npm是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。2、安装node:进原创 2015-06-09 16:31:32 · 2021 阅读 · 0 评论 -
WebSocket
一、概述HTTP协议是一种无状态协议,服务器端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话。WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信。举例来说,HTTP协议有点像发电子邮件,发出后必须等待对方回信;WebSocket则是像打电话,服务器端和客户端可以同时向对方发送数据,它们之间原创 2015-08-03 17:25:24 · 4663 阅读 · 2 评论 -
WebSocket-SockJS
一、什么是SockJSSockJS是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端:sockjs-node(https://github.com/sockjs/sockjs-node)客户端:sockjs-clien(https://github.com/sockjs/sockjs-client)原创 2015-08-04 15:53:51 · 34149 阅读 · 0 评论