- 博客(422)
- 资源 (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
667
原创 后端：基于node实现接口文档 并开放某个端口关闭进程等(linux指令)
首先购买服务器（可以某宝花30块租一个月服务器）购买后,通过xshell在inux上安装node,可以参考这篇文章：链接你会用得到这些linux基础命令node安装成功后,// 创建文件并打开touch serve.js && vi serve.js// 保存先按esc键，输入 :wq 即可保存文件并退出// 上面是一个最简单的接口，想实现多层路由可...
2020-04-07 13:23:51
249
原创 ts: 索引类型
索引签名用于定义对象类型，允许对象具有任意数量的属性，但属性名的类型必须是字符串（在大多数情况下）或数字（在某些特定的上下文中，如数组或类似数组的对象）。索引签名的值类型可以是任何 TypeScript 类型。类型索引访问允许你在类型级别上访问一个对象的索引类型。在泛型编程中，这特别有用，因为你可以根据传入的类型来动态地获取该类型的索引签名类型。索引访问操作符用于访问对象的属性或数组的元素，以及在类型级别上访问类型的索引签名。
2024-05-23 13:35:09
111
原创 ts：类型操作关键词
extends 关键字有两个主要用途：一是用于定义类（class）的继承，二是用于接口（interface）的扩展。用于获取一个变量或属性的类型，但是在ts中获取如对象的类型不是像js中返回’object’而是对象的类型字面量。用于检查对象（包括对象字面量、类实例、接口实现等）是否包含某个特定的属性或索引。从一个对象类型中选择一部分属性来创建新类型的。用于获取对象所有键的类型组成的联合类型。
2024-05-20 14:08:37
489
原创 babel原理：
根据源代码字符串分解成一个个token再解析生成ast语法树，遍历ast语法树进行编辑删除添加节点，将修改后的ast语法树转换成源代码。
2024-05-17 17:06:51
80
原创 webpack原理-热更新原理：hmr原理
hmr原理：Webpack开发服务器启动后会与浏览器建立websoket链接， webpack监听到文件改变就会重新编译，编译完成后生成新的hash值并将更新消息发送给浏览器， 浏览器接受到消息后通过会调用hmr runtime传递新的和旧的hash传递给服务端， 服务端根据新旧hash对比找出变更的代码块返回给服务端
2024-05-17 16:45:51
63
原创 webpack tree shaking示例： js css
需要借助purgecss-webpack-plugin来清楚未用到的css。生成环境下，会自动开启tree shaking，用来清除没有用到的js代码。不借助vue-cli怎么做到移除单文件里面未用的css类名？
2024-05-17 15:54:06
164
原创 现代浏览器性能优化示例-提前加载preload：
如果用户经常访问一个包含大量图片的网站，浏览器可能会自动为该网站的图片预加载。如taobao的pc网站。在network面板中， 看看是否有在页面初次加载时就发出的图片请求，这些可能是预加载的图片。预加载字体，以提高用户体验和页面加载速度。如taobao的pc网站。
2024-05-17 11:59:04
74
原创 现代浏览器性能优化示例-提前加载prefetch：
（如代码压缩、图片优化、使用CDN等）。不要为所有资源都添加 prefetch滥用 prefetch 可能会导致不必要的带宽浪费和服务器压力。不同的用户可能有不同的网络连接速度。对于使用慢速连接的用户，预取大量资源可能会对他们的体验产生负面影响。有些网站使用了按需加载这个时候就没有必要使用prefetch了。
2024-05-17 10:26:37
284
原创 webpack优化构建体积示例-按需加载：代码分割 懒加载
按需加载（也称为代码分割或懒加载），基于import()实现的。尽管 import() 语法是在 ES2020 标准中正式引入的，但它在早期就已经被一些工具和库（如 Webpack）所支持，并且被用作实现代码分割和懒加载的方式。相比import … from …，import() 是动态导入用来在运行时按需加载和执行模块，import … from … 是静态导入，它在编译时确定需要哪些模块。加载前点击后可以看到点击后加载了对应的js资源。
2024-05-16 18:30:12
182
原创 webpack优化构建体积示例-压缩图片：
在使用imagemin-webpack-plugin来配置图片压缩时，你需要确保已经安装了该插件以及它可能依赖的imagemin插件（如imagemin-mozjpeg、imagemin-pngquant等）。不同的图片格式有不同的特点和用途，它们也需要不同的压缩算法和技术，也为了保证能在各个浏览器环境下能正常加载显示，所以需要用到多个插件。
2024-05-16 15:02:26
238
原创 webpack处理静态资源-图片、字体图标：
如果你需要更细粒度的控制，或者你的项目中有一些特殊需求（例如，根据文件大小或类型进行不同的处理），那么 file-loader 或 url-loader 可能更适合你。
2024-05-16 13:50:22
131
原创 webpack优化构建速度示例-配置cache.type开启磁盘缓存:
开启filesystem缓存，构建耗时缩短了 754-136=618ms，同时.开启filesystem缓存前。开启filesystem缓存后。在 webpack 5 中，
2024-05-16 10:30:30
162
原创 webpack优化构建速度示例-babel-loader开启缓存cacheDirectory:
配置后， 可以看到node_modules/.cache/babel-loader目录下生成了缓存文件，多次打包后，时间从723缩短到了529ms。同时我们还看到webpack输出了cacheable modules 672 bytes， 代表webpack缓存不会受影响。
2024-05-16 09:55:01
203
原创 webpack优化构建速度示例-合理配置loader的include exclude:
以便 babel-loader 只处理必要的文件。可以看到配置后节省了1184-814=340ms。
2024-05-15 18:19:16
267
原创 webpack优化构建速度示例-externals:
可以看到将jquery排除在打包内，节省了319-177=144ms。这样做的主要目的是为了解决打包文件过大的问题。
2024-05-15 17:59:06
198
原创 webpack优化构建体积示例-并行压缩：
这是因为 Webpack 会在构建过程中添加一个额外的步骤：代码压缩。代码压缩是一个资源密集型的任务，它需要分析代码，移除不必要的字符、空格、注释，以及应用各种优化策略来减小最终打包文件的体积。可以看到构建产物减小了 321-316=5kb。
2024-05-15 17:28:20
227
原创 webpack优化构建速度示例-IgnorePlugin:
上面的配置忽略 moment 下的所有 locale 目录下的文件单独引入中文包，节省了构建时间262ms。
2024-05-15 16:46:40
185
原创 js设计模式： 单例模式
确保一个类只有一个实例存在。并提供一个全局的访问点,而且只能通过静态方法来获取。相比单例模式，它只能通过new方法获取。
2024-05-15 15:33:22
139
原创 webpack优化构建速度示例-resolve.extensions:
当项目不仅仅包含.js或.json文件，还包含其他类型文件(如.ts、.vue、.css)作为模块时，配置resolve.extensions可以不必要的文件搜索提高性能。可以看到优化resolve.extensions的顺序，简单的三个小模块的打包就带来了1508-1467=41ms的性能提升。
2024-05-15 11:45:46
205
原创 webpack优化构建速度示例-resolve.modules:
这样就会优先从share公司内部模块的目录查找，找到了就提高效率，找不到再从node_modules， 再找不到就报错。
2024-05-15 11:14:50
179
原创 webpack查看各个阶段耗时示例：
构建耗时： 1.038s （和webpack打印的1043ms差不多）有 561 个模块没有使用任何loader来处理，耗时0.647s。webpack5默认是开启profile的，可以看到编译耗时1061ms。从 SMP 的信息可以看到。
2024-05-15 09:57:55
208
原创 webpack监听文件改变实时编译示例：热更新
webpack-dev-server可以用来实现热更新。修改src下任一文件代码，webpack会自动打包更新。
2024-05-14 16:27:34
160
原创 webpack处理静态资源-模板文件： vue
webpack 本身不能直接处理 .vue 文件，但是可以通过一些loader来处理安装必要的依赖vue-loader、vue-template-compiler（用于编译模板）以及 css-loader（用于处理样式）
2024-05-14 15:01:17
181
原创 webpack处理静态资源示例-图片和字体图标：
对于图片，你可能会使用file-loader或url-loader（现在更推荐使用asset/resource或asset/inline规则），而对于字体图标，你通常会使用file-loader或asset/resource规则。
2024-05-14 13:59:36
85
原创 webpack优化构建速度示例-并行构建：
由于js的单线程特性，文件和任务时 要等待一个任务执行完成后执行下一个任务，但在实际开发中，很多任务是可以并行执行的（如同时处理多个不同js文件或同事压缩多张图片），一些loader和插件（thread-loader或happypack）提供了额外的并行处理能力。
2024-05-14 11:00:49
202
原创 webpack优化和压缩css代码示例：优化压缩css
如果你已经在 webpack 配置中使用了 css-minimizer-webpack-plugin，那么实际上你已经在间接地使用 cssnano 了。cssnano可以删除不必要的空格、注释、重复规则等，从而减小文件大小，提高页面加载速度。创建postcss.config.js文件。
2024-05-14 10:26:59
176
原创 webpack解决css兼容性示例：
在打包的js文件中搜索webkit 或在浏览器打包审查元素， 可以看到前缀是有生效的。创建postcss.config.js文件。
2024-05-14 10:09:18
303
原创 webpack使用tree shaking示例：
webpack在打包时，tree shaking会自动运行，webpack会解析代码 构建依赖图谱 标记未使用的模块和代码，并在最终打包结果中移除未使用的代码。在webpack5中，打包模式production时才开启。
2024-05-13 18:13:06
235
原创 webpack处理js和css模块化导入导出示例：
webpack默认并不能处理js模块化的导入和导出,依赖于ts-loader和babel-loader。webpack默认并不能处理css模块化的导入和导出,依赖于css-loader。
2024-05-13 17:14:04
196
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人