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