- 博客(436)
- 资源 (81)
- 收藏
- 关注
RSS订阅
原创 后端：添加开放端口 查看占用的端口（linux系统版）
防火墙添加端口firewall-cmd --zone=public --add-port=8888/tcp --permanent （–permanent永久生效，没有此参数重启后失效）firewall-cmd --zone=public --add-port=888/tcp --permanent （–permanent永久生效，没有此参数重启后失效）firewall-cmd --zone=public --add-port=80/tcp --permanent （–perman
2020-07-14 10:16:02
752
原创 后端：基于node实现接口文档 并开放某个端口关闭进程等(linux指令)
首先购买服务器（可以某宝花30块租一个月服务器）购买后,通过xshell在inux上安装node,可以参考这篇文章：链接你会用得到这些linux基础命令node安装成功后,// 创建文件并打开touch serve.js && vi serve.js// 保存先按esc键，输入 :wq 即可保存文件并退出// 上面是一个最简单的接口，想实现多层路由可...
2020-04-07 13:23:51
315
原创 服务器搭建静态网站
输入ucloud买的服务器的ip地址 和 root用户名和密码 在xshell进行连接，执行以下命令。这里以centos服务器为例。
2025-01-07 14:55:54
161
原创 js: 百度云BOS 分片上传
/ 1) 查看登录到百度智能云控制台 – 对象存储BOS”服务–选择一个Bucket，进入后可以查看该Bucket下的所有文件和文件夹。2）下载OS浏览器端不支持批量下载，可以通过以下方式下载文件(使用BOS桌面客户端/使用API/SDK/使用BOSCMD命令行工具)这里打开后直接点确定就可以了。默认没有开启cors。
2024-06-14 18:26:45
441
1
原创 ts: 索引类型
索引签名用于定义对象类型，允许对象具有任意数量的属性，但属性名的类型必须是字符串（在大多数情况下）或数字（在某些特定的上下文中，如数组或类似数组的对象）。索引签名的值类型可以是任何 TypeScript 类型。类型索引访问允许你在类型级别上访问一个对象的索引类型。在泛型编程中，这特别有用，因为你可以根据传入的类型来动态地获取该类型的索引签名类型。索引访问操作符用于访问对象的属性或数组的元素，以及在类型级别上访问类型的索引签名。
2024-05-23 13:35:09
644
原创 ts：类型操作关键词
extends 关键字有两个主要用途：一是用于定义类（class）的继承，二是用于接口（interface）的扩展。用于获取一个变量或属性的类型，但是在ts中获取如对象的类型不是像js中返回’object’而是对象的类型字面量。用于检查对象（包括对象字面量、类实例、接口实现等）是否包含某个特定的属性或索引。从一个对象类型中选择一部分属性来创建新类型的。用于获取对象所有键的类型组成的联合类型。
2024-05-20 14:08:37
567
原创 babel原理：
根据源代码字符串分解成一个个token再解析生成ast语法树，遍历ast语法树进行编辑删除添加节点，将修改后的ast语法树转换成源代码。
2024-05-17 17:06:51
116
原创 webpack原理-热更新原理：hmr原理
hmr原理：Webpack开发服务器启动后会与浏览器建立websoket链接， webpack监听到文件改变就会重新编译，编译完成后生成新的hash值并将更新消息发送给浏览器， 浏览器接受到消息后通过会调用hmr runtime传递新的和旧的hash传递给服务端， 服务端根据新旧hash对比找出变更的代码块返回给服务端
2024-05-17 16:45:51
97
原创 webpack tree shaking示例： js css
需要借助purgecss-webpack-plugin来清楚未用到的css。生成环境下，会自动开启tree shaking，用来清除没有用到的js代码。不借助vue-cli怎么做到移除单文件里面未用的css类名？
2024-05-17 15:54:06
303
原创 现代浏览器性能优化示例-提前加载preload：
如果用户经常访问一个包含大量图片的网站，浏览器可能会自动为该网站的图片预加载。如taobao的pc网站。在network面板中， 看看是否有在页面初次加载时就发出的图片请求，这些可能是预加载的图片。预加载字体，以提高用户体验和页面加载速度。如taobao的pc网站。
2024-05-17 11:59:04
122
原创 现代浏览器性能优化示例-提前加载prefetch：
（如代码压缩、图片优化、使用CDN等）。不要为所有资源都添加 prefetch滥用 prefetch 可能会导致不必要的带宽浪费和服务器压力。不同的用户可能有不同的网络连接速度。对于使用慢速连接的用户，预取大量资源可能会对他们的体验产生负面影响。有些网站使用了按需加载这个时候就没有必要使用prefetch了。
2024-05-17 10:26:37
450
原创 webpack优化构建体积示例-按需加载：代码分割 懒加载
按需加载（也称为代码分割或懒加载），基于import()实现的。尽管 import() 语法是在 ES2020 标准中正式引入的，但它在早期就已经被一些工具和库（如 Webpack）所支持，并且被用作实现代码分割和懒加载的方式。相比import … from …，import() 是动态导入用来在运行时按需加载和执行模块，import … from … 是静态导入，它在编译时确定需要哪些模块。加载前点击后可以看到点击后加载了对应的js资源。
2024-05-16 18:30:12
339
原创 webpack优化构建体积示例-压缩图片：
在使用imagemin-webpack-plugin来配置图片压缩时，你需要确保已经安装了该插件以及它可能依赖的imagemin插件（如imagemin-mozjpeg、imagemin-pngquant等）。不同的图片格式有不同的特点和用途，它们也需要不同的压缩算法和技术，也为了保证能在各个浏览器环境下能正常加载显示，所以需要用到多个插件。
2024-05-16 15:02:26
510
原创 webpack处理静态资源-图片、字体图标：
如果你需要更细粒度的控制，或者你的项目中有一些特殊需求（例如，根据文件大小或类型进行不同的处理），那么 file-loader 或 url-loader 可能更适合你。
2024-05-16 13:50:22
213
原创 webpack优化构建速度示例-配置cache.type开启磁盘缓存:
开启filesystem缓存，构建耗时缩短了 754-136=618ms，同时.开启filesystem缓存前。开启filesystem缓存后。在 webpack 5 中，
2024-05-16 10:30:30
328
原创 webpack优化构建速度示例-babel-loader开启缓存cacheDirectory:
配置后， 可以看到node_modules/.cache/babel-loader目录下生成了缓存文件，多次打包后，时间从723缩短到了529ms。同时我们还看到webpack输出了cacheable modules 672 bytes， 代表webpack缓存不会受影响。
2024-05-16 09:55:01
562
原创 webpack优化构建速度示例-合理配置loader的include exclude:
以便 babel-loader 只处理必要的文件。可以看到配置后节省了1184-814=340ms。
2024-05-15 18:19:16
465
原创 webpack优化构建速度示例-externals:
可以看到将jquery排除在打包内，节省了319-177=144ms。这样做的主要目的是为了解决打包文件过大的问题。
2024-05-15 17:59:06
251
原创 webpack优化构建体积示例-并行压缩：
这是因为 Webpack 会在构建过程中添加一个额外的步骤：代码压缩。代码压缩是一个资源密集型的任务，它需要分析代码，移除不必要的字符、空格、注释，以及应用各种优化策略来减小最终打包文件的体积。可以看到构建产物减小了 321-316=5kb。
2024-05-15 17:28:20
377
原创 webpack优化构建速度示例-IgnorePlugin:
上面的配置忽略 moment 下的所有 locale 目录下的文件单独引入中文包，节省了构建时间262ms。
2024-05-15 16:46:40
348
原创 js设计模式： 单例模式
确保一个类只有一个实例存在。并提供一个全局的访问点,而且只能通过静态方法来获取。相比单例模式，它只能通过new方法获取。
2024-05-15 15:33:22
175
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人