- 博客(97)
- 收藏
- 关注
RSS订阅原创 抽丝剥茧：详述一次DevServer Proxy配置无效问题的细致排查过程
事情的起因是这样的，在一个已上线的项目中，其中一个包含登录和获取菜单的接口因响应时间较长，后端让我尝试未经服务转发的另一域名下的新接口，旧接口允许跨域请求，但新接口不允许本地访问（只允许发布测试/生产的域名访问）。
2024-05-12 21:27:07
760
原创 构建动态交互式H5导航栏：滑动高亮、吸顶和锚点导航技巧详解
使用粘性定位 sticky 实现吸顶，IntersectionObserver 观察元素相交状态实现滑动高亮，计算高度并通过 scroll 实现吸顶。
2024-04-14 20:34:11
707
原创 antd/fusion表格增加圈选复制功能
我们存在着大量在PC页面通过表格看数据业务场景，表格又分为两种，一种是 antd / fusion 这种基于 dom 元素的表格，另一种是通过 canvas 绘制的类似 excel 的表格。基于 dom 的表格功能丰富较为美观，能实现多表头、合并单元格和各种自定义渲染（如表格中渲染图形 / 按钮 / 进度条 / 单选框 / 输入框），以展示为主，不提供圈选、整列复制等功能。canvas 绘制的类 excel 外表朴素更为实用，大量数据渲染不卡顿，操作类似 excel，能行/列选中，圈选、复制等功能。
2023-09-24 19:00:05
314
原创 PC首页资源加载速度由8s降到2s的优化实践
我们这次主要选择的指标是 FCP、LCP。FCP 表示着用户能最快看到页面内容的时间，LCP 则是可视区域的最大内容，这两个指标代表着用户真实对于页面快和慢的体验，FCP 在 1.8 秒内，LCP 在2.5 秒内是比较好的。
2023-09-10 20:55:55
266
原创 为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）
因历史遗留原因，接手的项目没有代码提醒/格式化，包括 eslint、pretttier，也没有 commit 提交校验，如 husky、commitlint、stylelint，与其期待自己或者同事的代码写得完美无缺，不如通过一些工具来进行规范和约束。
2023-08-06 20:17:56
622
原创 GIT保存记录原理之commit对象
每一次 commit 提交都是一个 commit 对象，通过40位的哈希校验和，可以找到 tree 对象，它也是一个校验和，通过这个校验和可以找到这次提交依赖的所有文件（二进制）并还原成真实文件。
2023-06-24 20:52:30
1545
原创 关于预处理器 sass 的超全用法
和 js 中的函数类似，在 sass 中将比较复杂或者常用的内容进行封装，可以重复使用。函数的定义函数名 function-name 与 function_name 相同@return 它只允许在函数体中使用，并且每个@function必须以@return结束。当遇到@return时， 它会立即结束函数并返回其结果。函数入参可以设置默认值，也可以按参数名传值，或者通过...表示任意参数函数@function实现的某些功能混入@mixin也能实现，但函数更侧重于做一些计算。
2023-05-14 21:28:12
577
1
原创 预处理器 Less 的十个语法
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。不过浏览器只能识别 CSS 语言，所以 Less 语言直接运行在浏览器端是不被识别的，需要我们通过一些方式将其先转成 CSS，再将 CSS 资源加载到浏览器中。
2023-04-02 20:58:23
344
原创 去中心化组件共享方案 —— Webpack Module Federation（模块联邦）
如果多个应用之间希望资源共享，除了使用 npm 包的形式，基于Webpack 5 Module Federation（模块联邦）实现的EMP微前端方案也可以一试，它不限制技术栈，但依赖于 Webpack5。
2023-03-26 20:16:52
412
原创 从ABNF读懂HTTP协议格式
HTTP是互联网中应用最广泛的应用层协议之一，设计之初是提供一种发布和接收HTML页面的方法，由URI来标识具体的资源。
2022-11-27 19:48:53
463
原创 网络互连模型之物理层和数据链路层
OSI 参考模型 是 ISO 公司提出的理论知识，并不具备实际应用。在真实使用中真正得到认可的是 TCP/IP 协议，学习的时候会把【网络接口层】还原成【数据链路层】和【物理层】，因为这两层关乎通信原理，非常重要。
2022-10-09 22:43:05
1022
原创 计算机的六种连接方式
交叉线适合两台计算机直连同轴电缆半双工通信、不安全、中间断了整个瘫痪集线器一个断了不会影响其它，仍然是半双工通信且不安全网桥具有记忆功能，可以记忆计算机的IP地址交换机相当于具有集线器+多接口的网桥，但仍然不能够跨网段路由器有记忆功能、可以跨网段以上就是计算机的六种连接方式， 更多有关前端、网络协议的内容可以参考我其它的博文，持续更新中~...
2022-08-28 22:27:27
3558
2
原创 vite — 超快且方便的编译工具
vite 基于 esmodule 来处理数据，使用到工具 ESBuild，编译速度非常快css、less、typescript、react 在 vite 中可以直接使用默认配置文件 vite.config.js 可添加其它配置，如 pluginvite 提供了编译后预览的指令 npx vite preview以上就是vite 编译资源的介绍， 更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~...
2022-08-14 20:02:42
2043
原创 Rollup 编译资源离不开 plugin
rollup主要用于处理esmodule的 js 资源，通过命令行可以直接执行，需要指定入口出口文件，以及编译的方式。默认不被支持的资源处理需要通过plugin，自己通过 commonjs 导出的资源使用，第三方库解析通过，处理 css 需要，vue 得依赖和，转换和压缩离不开和，最后通过和开启服务。区分环境通过配置参数。以上就是Rollup 编译资源的介绍， 更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~...
2022-08-07 19:09:19
560
原创 gulp来处理html、css、js资源啦
html文件通过插件对代码压缩less文件使用插件gulp-less解析，css文件兼容性通过处理js文件使用gulp-babel进行代码转换，压缩代码配合魔法注释将资源添加到html页面中和watch为编译开启自动服务串行和并行组合任务以上就是gulp处理html、css、js资源的介绍，更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~httpshttpshttpshttpshttpshttps。...
2022-07-31 21:42:06
374
原创 gulp使用指南
gulp主要以“流”的方式来处理资源，没有模块化，不适合大型项目。gulp每次处理即开启异步任务，可以并行、串行、监听资源的更新。使用插件，gulp也能实现代码转化、压缩等功能。以上就是gulp的介绍，更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~httpshttpshttpshttpshttpshttpshttpshttps。...
2022-07-24 21:37:55
368
原创 一起来自定义loader吧
新建node项目，在src文件夹下的index.js中简单编写一些代码name'alice',age20,};创建loaders文件夹，在文件夹下增加用于处理loader的js文件，通过module.exports函数可以拿到需处理的文件内容，并将处理好的结果返回};在配置文件中引入自定义的loader。定义loader方式有两种通过相对路径引入（这里使用的方式）通过resolveLoader属性配置，默认会去node_modules中查询依赖。.........
2022-07-17 19:54:59
608
3
原创 通过 tree shaking 移除无用代码
tree shaking 依赖于ES Module 的静态语法分析，在项目编译时移除无用的代码以减少文件体积。在文件中，我们可能定义了变量但是暂时又没有用到，这样会造成空间的浪费。在 为 时，会默认做一些配置，将无用的代码删除。为了看到没有做处理时编译后的文件效果，在 webpack 中做如下配置。在这种配置情况下，当存在没有用到的变量时，还是照原样编译到了 js 文件中。想要移除掉 js 文件中的无用代码，开启 通过 配置这样编译后就将没有用到的变量 username 和 foo 函数都移除掉了这时候
2022-07-10 20:48:54
586
原创 压缩 js 代码就用 terser
中提供了压缩 js 代码的方式，可以移除无用代码、替换变量名等，减少编译后文件体积，提升加载速度。在 配置文件 中通过将 设置为 或者 ，会对代码进行不同的处理。可以发现，模式下编译的文件，文件及变量名被修改、空格换行被去除，即使自己没有进行配置，webpack 也会在我们设置 的模式时默认添加一些属性，比如这里js代码压缩用到的就是 。处理代码依赖的是 这个工具， 是可以直接安装并独立使用的，使用的时候有非常多的配置可以自行定义，具体可参考 官方文档其中属于 compress options以下属于 ma
2022-07-03 19:57:51
4802
原创 不要再傻傻分不清 hash、 chunkhash 和 contenthash 啦
hash、contenthash 和 chunkhash 是通过散列函数处理之后，生成的一串字符，可用于区分文件。webpack.config.js 文件中，output 中定义输出 js 文件命名，plugins 中定义的抽取 css 文件命名在 中使用 发送请求，中引入 资源编译后，虽然我们自己定义的 css 文件名为 ，但是由于它被 引入了，所以打包出来的文件名变成了 。每一次编译后，生成的文件名都一样，这样会存在一个问题，通过 webpack 编译生成的静态文件会被我们放置到服务器中，当编译后的
2022-06-19 20:35:52
1339
原创 这样拆分和压缩css代码
在【拆分】和【压缩】css代码之前，首先要配置 loader 处理不同的 css 资源，因为 webpack 没有默认可处理 css 资源的规则，具体可参考这一篇 webpack处理css/less资源loader 处理不同类型的 css 资源后通过 将css代码添加到 文件中，但此时 css 代码并没有生成单独的文件，而是被编译到了 js 文件中。所以在 html 页面中，css 代码是通过 标签创建的，而不是直接引入 css 资源地址。当 css 文件较多时，全部打包至 js 文件，会使得 js 文件体
2022-06-12 19:54:58
412
原创 cdn 引入的资源需要通过 externals 排除打包哦~
cdn 指的是通过相互连接的网络系统，使用最靠近用户的服务器将音乐、图片等资源以高效率和低成本的方式将内容传递给用户。在 webpack 中，我们可能会将引入的第三方资源会编译成单独的文件，作为静态资源放到服务器上，但有些库它本身就有 cdn 链接，通过 cdn 直接加载会使各地资源获取速度更快。在 文件中写一段简单代码，通过 发送 get 请求在 中定义 属性，将公共资源单独编译执行 后，被编译到 559.js 文件中。再将编译后的 html 文件在浏览器中打开，获取到了 get 请求的响应数据在这种
2022-06-05 21:57:07
654
原创 在webpack中这样分离环境和代码就好啦
前面的文章中，webpack.config.js 中包含本地调试和线上发布的所有配置，编译后的 bundle.js 包含所有的代码。当项目变大、代码量变多、配置增加的时候，文件的可维护性会越来越差，是时候对他们进行分离啦~环境分离环境分离主要是区分本地和生产两种环境，本地调试需要能实时看到代码变化，而生产环境需要编译成指定的文件。可以采用两种方式开发环境和生产环境分别定义配置文件，在 package.json 中定义对应的指令开发环境和生产环境共用配置文件，通过参数来区分环境配置文件分离
2022-05-29 20:06:12
219
原创 webpack dev server 与 hot module replace 提高开发效率
通过 webpack命令编译源代码时，如果我们对源代码进行了修改，需要重新执行命令才能看到编译后的效果。这样在开发中非常的影响效率，如果存在一种方式，当文件被修改时，webpack 自动监听重新编译，并反馈给开发者，这样就能更高效的进行开发。watch我们通过 webpack执行命令时，编译完成之后进程会停止，而 webpack --watch编译完成后，不会停止进程，并且当文件内容发生更改时，将重新执行编译操作。在项目中有两种配置方式package.json 中配置命令webpack.co
2022-05-22 20:02:06
570
原创 规范代码编写风格就用 eslint 和 prettier
eslint 可以用于规范我们的编码，使得项目中的代码风格一致，更利于阅读和维护，而 prettier 可以在当我们代码不符合 eslint 规范是进行部分自动修复。eslint通过 npm install eslint -D安装 eslint，然后执行 npx eslint --init初始化配置文件在执行 init 操作的时候，eslint 生成配置文件会问你一些问题想怎样来使用 eslint模块化的方式（Es module、commonjs）选择哪一种框架（React、Vue）是否需要
2022-05-15 22:22:29
948
原创 来会会babel这个重要且神奇的工具
babel 在前端工程化开发中发挥着至关重要的作用，它能将较高级的语法转成浏览器可识别的代码，无论中 es6 中 const 、promise 还是 React、TypeScript。以下babel在线工具中左侧输入代码，右侧为编译后的结果，设置需要浏览器兼容的版本后，可以看到 “const” 编译成 “var”，“箭头函数” 编译成 “普通函数”。命令行使用babel 和之前说到的 postcss 一样，可以通过命令行运行，解析文件夹或者文件。安装命令行工具所需要的依赖，npm install @
2022-05-08 21:55:40
1634
原创 26种source-map看花了眼？别急，理解这几个全弄懂
上一篇 webpack处理模块化源码 的文章中提到了 “source map”，这一篇来详细说说。有什么作用source map 用于映射编译后的代码与源码，这样如果编译后的代码出错了，可以很快速的定位到源文件的位置。我们在 format.js 文件中打印一个不存在的 hello 变量， 当没有 source map 的时候，没有办法看到报错内容在源码的哪个位置。生产环境提示报错是在编译后的 bundle.js 文件，点击该文件后，只能看到压缩和丑化之后的代码。[外链图片转存失败,源站可能有防盗链
2022-05-04 21:11:11
3276
原创 其实webpack编译“模块化“的源码没那么难
我们在 webpack初体验 这篇文章中演示到，浏览器不支持 CommonJS ，在特定场景下才支持 Es Module ，而 webpack 可以将这些模块化的代码解析成浏览器可识别的语法。那么 webpack 究竟是对模块化做了怎样的处理呢？一起来看看。项目结构demo├─ src │ ├─ utils│ │ ├─ common_math.js│ │ └─ esmodule_format.js │ ├─ common_index.js│ ├─ esm
2022-04-24 20:20:10
453
原创 看，这些 plugins 常用又简单
前面文章中 体验了webpack的打包 、解析css资源 、处理图片字体等文件 接下来看看 plugins 有什么作用吧~项目路径如下，和上一篇 处理图片字体等文件 项目保持一致demo├─ src│ ├─ css│ │ ├─ index.css│ │ └─ file.css │ ├─ img│ │ ├─ portrait.png │ │ └─ sky.jpg │ ├─ js│ │ ├─ component.js│
2022-04-17 20:28:31
1085
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人