From 061507190ac1e8018f6b7bc4ee6b139a89d871d2 Mon Sep 17 00:00:00 2001 From: kuro-p <837408039@qq.com> Date: Fri, 7 Jun 2024 00:42:26 +0800 Subject: [PATCH] feat: update post --- _config.yml | 2 +- ...64\347\273\210\346\200\273\347\273\223.md" | 36 +++++++----- ...14\357\274\211\345\256\236\350\267\265.md" | 56 +++++++++++++------ ...00\345\217\221\345\260\217\347\273\223.md" | 49 ++++++++-------- source/about/index.md | 5 +- 5 files changed, 92 insertions(+), 56 deletions(-) diff --git a/_config.yml b/_config.yml index 317520da..a783e106 100644 --- a/_config.yml +++ b/_config.yml @@ -103,4 +103,4 @@ deploy: branch: master name: "Kuro-P" email: "kuro8374@foxmail.com" - message: "fix: post updated time" + message: "feat: update post" diff --git "a/source/_posts/2023\345\271\264\347\273\210\346\200\273\347\273\223.md" "b/source/_posts/2023\345\271\264\347\273\210\346\200\273\347\273\223.md" index 06b86ffd..bb30d4a6 100644 --- "a/source/_posts/2023\345\271\264\347\273\210\346\200\273\347\273\223.md" +++ "b/source/_posts/2023\345\271\264\347\273\210\346\200\273\347\273\223.md" @@ -11,9 +11,9 @@ categories: * 一月 * __工作__ 为过年的活动忙到焦头烂额。 * 二月 - * __除夕__ 上午到家,晚上窝在沙发里刚准备开始看春晚,被拽起来debug,值得铭记的一刻。 - * __回家过年__ 白天在网吧里与好友开黑玩的不亦乐乎、晚上回家与老爸对着零食山一边观影一边开炫。 - * __元宵节__ 多请了几天假,这次在家里过完元宵再走,陪她过完生日再走。她变得有些陌生,不太愿与我搭话,总是一个人默默地坐着。于是决定今年逢节日就多回家里陪陪她。 + * __除夕__ 上午到家,晚上抱着电脑窝在沙发里,看着春晚与bug齐飞。 + * __假期__ 白天在网吧里与好友开黑玩的不亦乐乎、晚上回家与老爸对着零食山一边观影一边开炫。 + * __元宵节__ 这次在家里过完元宵再走。想着今年的节假日多回来里陪陪家人。 * __返程__ 不知的糖果的魔力还是幸福和快乐的代价,长胖5kg(甚至抹了零头)。 * 三月 * __工作__ @@ -25,31 +25,39 @@ categories: * __取消游玩计划__ 本想五一去沈阳找朋友耍两天,游玩笔记已经做好,就差一张车票。和朋友的时间。 * 六月 * __工作__ - * __端午节__ 回家三天,她摔倒了三次,一次比一次重。如果早知我回去会分散父母注意力,我不会回。 + * __端午节__ 回家待三天,美食&家人&好友&游戏。 * 七月 - * __噩梦__ 端午节刚刚过去一周。我再也 + * __噩梦__ 世事难料。 * 八、九 * __工作__ 忙碌 * 十月 * __十一假期__ - * __搬家__ 十一假期换了一个离公司只有一站地铁的小区。 - * __游戏__ 往日之影沉浸式通关,短暂的带我逃离现实。 - * __健身房__ 鬼使神差的想找私教带我锻炼,于是就去了。 - * __舞蹈室__ 上了堂体验课,并未觉得自己会坚持下去,但还是办卡了。 + * __搬家__ 十一假期换了一个离公司只有一站地铁的小区 + * __游戏__ 往日之影沉浸式通关 + * __健身房__ 鬼使神差 + * __舞蹈室__ 上不上课另说,先把卡办了 * __工作__ 忙碌 * 十一月、十二月 * __工作__ 忙碌 #### 黑白色的夏天 -记不清别的,只记得一直在下雨,雨,大雨、小雨、绵绵细雨、骤然而至的暴雨。 -在早上健身 + 白天工作 + 周末跳舞的身体折磨下,每天晚上洗漱后几乎倒头就睡。 -每天专注工作和锻炼,这让我的内心缓和不少。 -十二月底,感觉自己的状态回来了,终于像个人了。 -舞蹈班由于肢体过于不协调后来没再去,很好的一次体验,老师教的很认真,大家对新手都很包容。 +记不清别的,只记得推开门看见父亲哭的不成样子的脸,和再一推开门跪倒在地上哭泣的母亲。 + +七月下了好多场雨。 + +#### 入秋 + +早上健身 + 白天工作 + 周末跳舞 = 每天晚上洗漱后几乎倒头就睡。 + +不想,也无暇顾及其他。 + +#### 冬日 健身课还在坚持上,没有目标,纯粹的精神支撑。 +舞蹈老师教的很认真,大家对新手都很包容。 + ### 工作 这一年大大小小的运营活动页没少写,颇有种“流水的前端,铁打的运营”既视感。由怕写到烦,但是定制化的活动却只增不减。访问量、营收、社区活跃度只要为其中一项带来效果就行,可是... diff --git "a/source/_posts/PWA-Service-Worker-\345\260\217\347\273\223\357\274\210\344\272\214\357\274\211\345\256\236\350\267\265.md" "b/source/_posts/PWA-Service-Worker-\345\260\217\347\273\223\357\274\210\344\272\214\357\274\211\345\256\236\350\267\265.md" index 3877c4bf..b7466767 100644 --- "a/source/_posts/PWA-Service-Worker-\345\260\217\347\273\223\357\274\210\344\272\214\357\274\211\345\256\236\350\267\265.md" +++ "b/source/_posts/PWA-Service-Worker-\345\260\217\347\273\223\357\274\210\344\272\214\357\274\211\345\256\236\350\267\265.md" @@ -27,17 +27,37 @@ Service Worker 的初衷是极致优化用户体验,带来丝滑般流畅的 ### 三、Service Worker 安装注册 #### 注册文件 ````javascript -// service worker 注册文件 if ('serviceWorker' in window.navigator) { - navigator.serviceWorker.register('./sw.js', { scope: './' }) - .then(function (reg) { - console.log('success', reg); - }) - .catch(function (err) { - console.log('fail', err); - }); + navigator.serviceWorker.register('./sw.js', { scope: './' }) + .then(function (reg) { + console.log('success', reg); + }) + .catch(function (err) { + console.log('fail', err); + }); +} +```` +#### 注销文件 +````javascript +if ('serviceWorker' in window.navigator) { + navigator.serviceWorker.getRegistrations.then(function (registrations) { + //returns installed service workers + if (registrations.length) { + for(let registration of registrations) { + registration.unregister().then(ret => { + console.log( + 'Unregister Service Worker[' + + settings.serviceWorkerUrl + + ']: ' + ret + ) + }) + } + } + }) +} ```` + register 方法接受两个参数,第一个是 service worker 文件的路径,第二个参数是 Serivce Worker 的配置项,可选填,其中比较重要的是 __scope__ 属性。 #### 拓展 Service Worker 作用域 @@ -68,12 +88,10 @@ app.use(serveStatic(`${sourceRoot}/home`, { 以 gulp 为例,使用 [`sw-precache`](https://github.com/GoogleChromeLabs/sw-precache) 插件生成注册文件: ````javascript gulp.task('generate-service-worker', function(callback) { - swPrecache.write('./service-worker.js', { staticFileGlobs: ['./build/public' + '/**/*.{js,css,png,jpg,webp,gif,svg,eot,ttf,woff}'], stripPrefix: './build' }, callback); - }); ```` @@ -91,29 +109,33 @@ gulp.task('generate-service-worker', function(callback) { 2. __`public/*` 无法匹配public路径下的所有文件, addCaches 时只能写fileName?__ 原因:service worker 没有通配符 * 这个概念,`/sw-test/` 这个 path 只是让 sw 寻找缓存时的一个入口,用以区分各个路径的缓存([详情](https://stackoverflow.com/questions/46830493/is-there-any-way-to-cache-all-files-of-defined-folder-path-in-service-worker)); 解决方案:service-worker.js 使用官方的 `sw-precache` 插件生成([详情](https://stackoverflow.com/questions/46208326/for-serviceworker-cache-addall-how-do-the-urls-work/46213137#46213137)); -3. __如果 service worker 缓存的了全部的js和img 会不会导致 cacheStorage 很占用用户的系统空间?__ -不会,各个浏览器分配给各站点的 cacheStorrage 的值不一样,同时也受用户设备空间影响。 +3. __如果 service worker 缓存的了全部的 js 和 img 会不会导致 cacheStorage 很占用用户的系统空间?__ +不会,cacheStorage 的值不是无限大的。虽然各个浏览器分配给各站点的 cacheStorrage 的值不一样,同时也受用户设备空间影响。 ### 落地情况 -个人觉得 Service Worker 更适合在单页应用、文档类应用的等场景使用,才能把离线缓存的优势发挥出来。比如 [Vue](https://cn.vuejs.org/) 的官网。
+还是觉得 Service Worker 最适合在 SPA、文档类应用的等场景使用,才能把离线缓存的优势发挥出来。比如 [Vue](https://cn.vuejs.org/) 的官网。
*2019.4.23* 未落地。主要原因有两点: -1. 工作中想要使用 Service worker 提供离线缓存服务的是一个负责 APP 内嵌页面的 H5 站点,HTML都是动态渲染的,活动数据是实时的,不能离线访问; +1. 工作中想要使用 Service worker 提供离线缓存服务的是一个负责 APP 内嵌页面的 H5 站点,HTML都是动态渲染的,活动数据是实时性较强,缓存数据意义不大; 2. 这个站点的页面入口都是几乎都是单独的活动页,没有一个统一 sw 注册的入口;
+ *2020.3.16* 重新看这篇文章的时候,如果在几个主要的活动入口页引入 sw 的注册文件,那么这几个长期的活动就可以应用 sw 缓存了,但这并没有覆盖全站,所以依然不是好的解决方案。 +*2024.5.9* +查了下现公司的使用方式,在主页注册,pv/uv 高的页面会使用 Service Worker 拦截请求将响应缓存到 indexDB 中。 + ### 应用场景 这部分总结摘录自这篇文章:[Service Worker 从入门到出门](https://juejin.im/post/5d26aec1f265da1ba56b47ea#heading-6) * 网站功能趋于稳定:频繁迭代的网站似乎不方便加 Service Worker。 * 网站需要拥有大量用户:管理后台、OA系统等场景似乎不是很有必要加 Service Worker。 -* 网站真的在追求用户体验:Bug 多多、脸不好看的网站似乎不是很有必要加 Service Worker。 -* 网站用户体验关乎用户留存:12306 似乎完全不需要加 Service Worker。 +* 网站真的在追求用户体验:优先保证网站其他功能正常运行,在此基础上引入 SW 来优化加载体验。 +* 网站用户体验关乎用户留存:体验优先于功能。 -简单总结:Service Worker 的初衷是极致优化用户体验,是用来锦上添花的,技术只是技术,但实际应用前,应考虑成本和收益。 +简单总结:Service Worker 在实际应用前,应考虑成本和收益,不要为了用技术而用技术。 ### 参考链接 * [Service Worker ——这应该是一个挺全面的整理](https://juejin.im/post/5b06a7b3f265da0dd8567513#heading-1) diff --git "a/source/_posts/dweb-cli\345\274\200\345\217\221\345\260\217\347\273\223.md" "b/source/_posts/dweb-cli\345\274\200\345\217\221\345\260\217\347\273\223.md" index 34e95264..c6535475 100644 --- "a/source/_posts/dweb-cli\345\274\200\345\217\221\345\260\217\347\273\223.md" +++ "b/source/_posts/dweb-cli\345\274\200\345\217\221\345\260\217\347\273\223.md" @@ -4,25 +4,26 @@ date: 2023-12-20 16:21:07 tags: [JavaScript ,NodeJS, 开发小结] categories: [前端] --- -每次都是从老项目中 `Ctrl+C` & `Ctrl+V` 拷贝一份文件目录和编译脚本,然后删删改改就可以跑新项目了。大多项目的编译模块其实都大同小异。于是在 2022 年年中的时候写了一个前端脚手架,主要功能是【生成项目模板】并【统一内部打包工具】。 -今年主要是按需维护和更新,从 v1 升级至 v2 ,并剔除第二个功能😲。 +每次都是从老项目中 `Ctrl+C` & `Ctrl+V` 拷贝一份文件目录和编译脚本,然后删删改改就可以跑新项目了。大多项目的编译模块其实都大同小异。于是在 2022 年中的时候写了一个 cli,主要功能是【快速生成项目模板】。 +今年按需维护和更新,从 v1 升级至 v2 ,出于灵活性考虑,将编译配置一并生成到项目中。 ### 前期准备 -- 确定项目名称:好记、一目了然 +- 确定项目名称 - 确定主要功能 -- 确定依赖版本:调研组内项目、构建工具的 webpack 和 React 版本 -- 确定命令行基础交互功能:参考 vue-cli 和 create-react-app 两个脚手架 -- 确定脚手架项目结构 -- 确定生成的模板项目结构:调研组内项目 +- 确定通用依赖版本 +- 确定命令行基础交互功能 +- 确定脚手架结构 +- 确定模板项目结构 ### 项目搭建 #### 项目名称 -脚手架名字定为 dweb-cli ,表示这是一个用于 douban web 项目开发的工具。 +项目名尽量做到好记、一目了然。脚手架名字定为 dweb-cli ,表示这是一个用于 douban web 项目开发的工具。 #### 主要功能 -- 生成通用项目模板 -- 集成编译脚本:让用户可以通过 dweb-cli 直接编译脚手架生成的项目、而无需再手动配置。 +- 创建项目(dweb create) +- 编译项目(dweb run) + #### 依赖版本 `Webpack 5`、`React 17.0.2` #### 命令行交互 @@ -57,15 +58,15 @@ dweb export # 导出 cli 中的某项配置到当前目录 ``` #### 脚手架目录结构 ```sh - ├── .github/workflows # github ci 配置文件 - ├── .husky # 代码提交相关的钩子配置(eslint) - ├── bin # npm 注册的命令 + ├── bin # 命令执行文件 ├── build/utils # 构建工具 ├── lib # 命令相关的实现 - ├── template # 模板项目 + ├── template # 项目模板 + ├── .github/workflows # github ci 配置文件 + ├── .husky # 代码提交相关的钩子配置(eslint) ``` -#### 模板项目目录结构 +#### 模板目录结构 ``` ├── README.md ├── deploy.config.js @@ -84,10 +85,10 @@ dweb export # 导出 cli 中的某项配置到当前目录 │ │ └── utils │ │ └── axios-instance.ts │ └── pages -│ ├── test +│ ├── home │ │ ├── index.tsx │ │ └── style.scss -│ └── test1 +│ └── screenshot │ ├── index.tsx │ └── style.scss ├── tsconfig.json @@ -96,13 +97,18 @@ dweb export # 导出 cli 中的某项配置到当前目录 ``` ### v1 升级至 v2 -v1 试用半年后,发现团队使用习惯更注重灵活性。如果将编译全部集成在 dweb 里,很多小项目定制化配置反倒复杂了一些。且大家对于 dweb 内已集成的 loader 和编译配置实际上并不知晓(很少会点进项目查看),更希望能 __直接__ 看到当前项目的“编译配置”。 +__v1 将编译脚本集成在 cli 内部,编译工作交给 cli。__ +__v2 将编译脚本生成到项目中,编译工作交还给项目,本身只保留生成功能。__ + +这个更改是因为团队成员在使用 v1 版本时更希望能灵活配置编译脚本。起初 dweb v1 尝试使用自定义配置文件的路径用来支持灵活配置,但大家对于 dweb 内已集成的 loader 和编译配置实际上并不知晓(很少会点进项目/文档查看),更希望能"__直接__"看到当前项目的“编译配置”。 所以 v2 版本的 dweb 不再集成编译工作,而是将基础的编译配置放到项目模板中,创建新项目时会自动在新项目中生成一套默认的编译脚本。 + +不过这样做的弊端就是原本升级依赖只需要升级 dweb 的版本,而现在依然需要逐个项目进行升级。 #### 其他更新 - 使用 `swc-loader` 替换 `babel-loader` 以减少编译耗时 -- 支持第三方插件 css module 单独编译 -- 增加 CI、Log 埋点上报、登录状态获取等基础配置 -- 增加 页面导航头、ErrorBoundary 等常用组件 +- 支持第三方插件对 css module 单独编译 +- 增加 Log 埋点、登录状态凭证等基础项目配置 +- 增加 CI 配置支持 mr 自动发包、发送提醒 ### 开发过程中用到的工具 - [commander](https://github.com/tj/commander.js):命令行参数接收工具 @@ -111,4 +117,3 @@ v1 试用半年后,发现团队使用习惯更注重灵活性。如果将编 - [ora](https://github.com/sindresorhus/ora):命令行进度条美化工具 - [handlebars](https://github.com/handlebars-lang/handlebars.js):模板渲染工具 - diff --git a/source/about/index.md b/source/about/index.md index 2e413726..0559c631 100644 --- a/source/about/index.md +++ b/source/about/index.md @@ -19,10 +19,11 @@ Good good study, day day up ╰( ̄▽ ̄)╭ . ### 关于我 大三的时候,身边的大多数同学决定考研,继续研究数学通信。 -而当时的我,一手掐着前端的学习资料,一手抱着通信课本,毅然决然的准备成为一名准前端er。 +而当时的我,一手拿着前端的学习资料,一手抱着通信课本,毅然决然的准备成为一名准前端er。 现在,我在一家互联网金融公司继续挖坑、填坑。 现在,我在一家二手交易平台继续打酱油。 -现在,我在一家社区网站继续修修补补。 +现在,我在一家社区内容网站继续修修补补。 +现在,我在砧板上晒太阳。 ### 关于辽工大 辽工大坐落在葫芦岛兴城,四周山水环绕,风景秀美。