Merge branch 'master' of github.com:shfshanyue/Daily-Question

.vuepress/issues.json

@@ -15419,7 +15419,7 @@
     ],
     "comment": {
       "id": "IC_kwDODQzyOs44isNG",
-      "body": "使用 [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) 可评估每个 loader/plugin 的执行耗时。\r\n\r\n## 持久化缓存: cache\r\n\r\n`webpack5` 内置了关于缓存的插件，可通过以下配置开启。它将 `Module`、`Chunk`、`ModuleChunk` 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。\r\n\r\n``` js\r\n{\r\n  cache: {\r\n    type: 'filesystem'\r\n  }\r\n}\r\n```\r\n\r\n如对一个 JS 文件配置了 `eslint`、`typescript`、`babel` 等 `loader`，他将有可能执行五次编译，被五次解析为 AST\r\n\r\n1. `acorn`: 用以依赖分析，解析为 `acorn` 的 AST\r\n2. `eslint-parser`: 用以 lint，解析为 `espree` 的 AST\r\n3. `typescript`: 用以 ts，解析为 `typescript` 的 AST\r\n4. `babel`: 用以转化为低版本，解析为 `@babel/parser` 的 AST\r\n5. `terser`: 用以压缩混淆，解析为 `acorn` 的 AST\r\n\r\n而当开启了持久化缓存功能，最耗时的 AST 解析将能够从磁盘的缓存中获取，再次编译时无需再次进行解析 AST。\r\n\r\n**得益于持久化缓存，二次编译甚至可得到与 Unbundle 的 vite 等相近的开发体验**\r\n\r\n在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@depcrated` 状态。\r\n\r\n``` js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.ext$/,\r\n        use: ['cache-loader', ...loaders],\r\n        include: path.resolve('src'),\r\n      },\r\n    ],\r\n  },\r\n};\r\n```\r\n\r\n![cache-loader](https://cdn.jsdelivr.net/gh/shfshanyue/assets@master/src/cache-loader.7hlpm1nh2z40.png)\r\n\r\n## 多进程: thread-loader\r\n\r\n`thread-loader` 为官方推荐的开启多进程的 `loader`，可对 babel 解析 AST 时开启多线程处理，提升编译的性能。\r\n\r\n``` js\r\nmodule.exports={\r\n  module:{\r\n    rules:[\r\n      {\r\n        test:/\\.js$/,\r\n        use:[\r\n          {\r\n            loader: 'thread-loader',\r\n            options: {\r\n              workers: 8\r\n            }\r\n          },\r\n          'babel-loader'\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n}\r\n```\r\n\r\n在 `webpack4` 中，可使用 [happypack plugin](https://github.com/amireh/happypack)，但需要注意的是 `happypack` 已经久不维护了。",
+      "body": "使用 [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) 可评估每个 loader/plugin 的执行耗时。\r\n\r\n## 持久化缓存: cache\r\n\r\n`webpack5` 内置了关于缓存的插件，可通过以下配置开启。它将 `Module`、`Chunk`、`ModuleChunk` 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。\r\n\r\n``` js\r\n{\r\n  cache: {\r\n    type: 'filesystem'\r\n  }\r\n}\r\n```\r\n\r\n如对一个 JS 文件配置了 `eslint`、`typescript`、`babel` 等 `loader`，他将有可能执行五次编译，被五次解析为 AST\r\n\r\n1. `acorn`: 用以依赖分析，解析为 `acorn` 的 AST\r\n2. `eslint-parser`: 用以 lint，解析为 `espree` 的 AST\r\n3. `typescript`: 用以 ts，解析为 `typescript` 的 AST\r\n4. `babel`: 用以转化为低版本，解析为 `@babel/parser` 的 AST\r\n5. `terser`: 用以压缩混淆，解析为 `acorn` 的 AST\r\n\r\n而当开启了持久化缓存功能，最耗时的 AST 解析将能够从磁盘的缓存中获取，再次编译时无需再次进行解析 AST。\r\n\r\n**得益于持久化缓存，二次编译甚至可得到与 Unbundle 的 vite 等相近的开发体验**\r\n\r\n在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@deprecated` 状态。\r\n\r\n``` js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.ext$/,\r\n        use: ['cache-loader', ...loaders],\r\n        include: path.resolve('src'),\r\n      },\r\n    ],\r\n  },\r\n};\r\n```\r\n\r\n![cache-loader](https://cdn.jsdelivr.net/gh/shfshanyue/assets@master/src/cache-loader.7hlpm1nh2z40.png)\r\n\r\n## 多进程: thread-loader\r\n\r\n`thread-loader` 为官方推荐的开启多进程的 `loader`，可对 babel 解析 AST 时开启多线程处理，提升编译的性能。\r\n\r\n``` js\r\nmodule.exports={\r\n  module:{\r\n    rules:[\r\n      {\r\n        test:/\\.js$/,\r\n        use:[\r\n          {\r\n            loader: 'thread-loader',\r\n            options: {\r\n              workers: 8\r\n            }\r\n          },\r\n          'babel-loader'\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n}\r\n```\r\n\r\n在 `webpack4` 中，可使用 [happypack plugin](https://github.com/amireh/happypack)，但需要注意的是 `happypack` 已经久不维护了。",
       "star": {
         "totalCount": 0
       },

data/issues.json

@@ -25774,7 +25774,7 @@
       "nodes": [
         {
           "id": "IC_kwDODQzyOs44isNG",
-          "body": "使用 [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) 可评估每个 loader/plugin 的执行耗时。\r\n\r\n## 更快的 loader: swc\r\n\r\n在 `webpack` 中耗时最久的当属负责 AST 转换的 loader。\r\n\r\n当 loader 进行编译时的 AST 操作均为 CPU 密集型任务，使用 Javascript 性能低下，此时可采用高性能语言 rust  编写的  `swc`。\r\n\r\n比如 Javascript 转化由 `babel` 转化为更快的 [swc](https://swc.rs/)。\r\n\r\n``` js\r\nmodule: {\r\n  rules: [\r\n    {\r\n      test: /\\.m?js$/,\r\n      exclude: /(node_modules)/,\r\n      use: {\r\n        loader: \"swc-loader\"\r\n      }\r\n    }\r\n  ];\r\n}\r\n```\r\n\r\n## 持久化缓存: cache\r\n\r\n`webpack5` 内置了关于缓存的插件，可通过 [cache 字段](https://webpack.js.org/configuration/cache/)配置开启。\r\n\r\n它将 `Module`、`Chunk`、`ModuleChunk` 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。\r\n\r\n``` js\r\n{\r\n  cache: {\r\n    type: 'filesystem'\r\n  }\r\n}\r\n```\r\n\r\n如对一个 JS 文件配置了 `eslint`、`typescript`、`babel` 等 `loader`，他将有可能执行五次编译，被五次解析为 AST\r\n\r\n1. `acorn`: 用以依赖分析，解析为 `acorn` 的 AST\r\n2. `eslint-parser`: 用以 lint，解析为 `espree` 的 AST\r\n3. `typescript`: 用以 ts，解析为 `typescript` 的 AST\r\n4. `babel`: 用以转化为低版本，解析为 `@babel/parser` 的 AST\r\n5. `terser`: 用以压缩混淆，解析为 `acorn` 的 AST\r\n\r\n而当开启了持久化缓存功能，最耗时的 AST 解析将能够从磁盘的缓存中获取，再次编译时无需再次进行解析 AST。\r\n\r\n**得益于持久化缓存，二次编译甚至可得到与 Unbundle 的 vite 等相近的开发体验**\r\n\r\n在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@depcrated` 状态。\r\n\r\n``` js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.ext$/,\r\n        use: ['cache-loader', ...loaders],\r\n        include: path.resolve('src'),\r\n      },\r\n    ],\r\n  },\r\n};\r\n```\r\n\r\n![cache-loader](https://cdn.jsdelivr.net/gh/shfshanyue/assets@master/src/cache-loader.7hlpm1nh2z40.png)\r\n\r\n## 多进程: thread-loader\r\n\r\n[thread-loader](https://github.com/webpack-contrib/thread-loader) 为官方推荐的开启多进程的 `loader`，可对 babel 解析 AST 时开启多线程处理，提升编译的性能。\r\n\r\n``` js\r\nmodule.exports={\r\n  module:{\r\n    rules:[\r\n      {\r\n        test:/\\.js$/,\r\n        use:[\r\n          {\r\n            loader: 'thread-loader',\r\n            options: {\r\n              workers: 8\r\n            }\r\n          },\r\n          'babel-loader'\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n}\r\n```\r\n\r\n在 `webpack4` 中，可使用 [happypack plugin](https://github.com/amireh/happypack)，但需要注意的是 `happypack` 已经久不维护了。",
+          "body": "使用 [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) 可评估每个 loader/plugin 的执行耗时。\r\n\r\n## 更快的 loader: swc\r\n\r\n在 `webpack` 中耗时最久的当属负责 AST 转换的 loader。\r\n\r\n当 loader 进行编译时的 AST 操作均为 CPU 密集型任务，使用 Javascript 性能低下，此时可采用高性能语言 rust  编写的  `swc`。\r\n\r\n比如 Javascript 转化由 `babel` 转化为更快的 [swc](https://swc.rs/)。\r\n\r\n``` js\r\nmodule: {\r\n  rules: [\r\n    {\r\n      test: /\\.m?js$/,\r\n      exclude: /(node_modules)/,\r\n      use: {\r\n        loader: \"swc-loader\"\r\n      }\r\n    }\r\n  ];\r\n}\r\n```\r\n\r\n## 持久化缓存: cache\r\n\r\n`webpack5` 内置了关于缓存的插件，可通过 [cache 字段](https://webpack.js.org/configuration/cache/)配置开启。\r\n\r\n它将 `Module`、`Chunk`、`ModuleChunk` 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。\r\n\r\n``` js\r\n{\r\n  cache: {\r\n    type: 'filesystem'\r\n  }\r\n}\r\n```\r\n\r\n如对一个 JS 文件配置了 `eslint`、`typescript`、`babel` 等 `loader`，他将有可能执行五次编译，被五次解析为 AST\r\n\r\n1. `acorn`: 用以依赖分析，解析为 `acorn` 的 AST\r\n2. `eslint-parser`: 用以 lint，解析为 `espree` 的 AST\r\n3. `typescript`: 用以 ts，解析为 `typescript` 的 AST\r\n4. `babel`: 用以转化为低版本，解析为 `@babel/parser` 的 AST\r\n5. `terser`: 用以压缩混淆，解析为 `acorn` 的 AST\r\n\r\n而当开启了持久化缓存功能，最耗时的 AST 解析将能够从磁盘的缓存中获取，再次编译时无需再次进行解析 AST。\r\n\r\n**得益于持久化缓存，二次编译甚至可得到与 Unbundle 的 vite 等相近的开发体验**\r\n\r\n在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@deprecated` 状态。\r\n\r\n``` js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.ext$/,\r\n        use: ['cache-loader', ...loaders],\r\n        include: path.resolve('src'),\r\n      },\r\n    ],\r\n  },\r\n};\r\n```\r\n\r\n![cache-loader](https://cdn.jsdelivr.net/gh/shfshanyue/assets@master/src/cache-loader.7hlpm1nh2z40.png)\r\n\r\n## 多进程: thread-loader\r\n\r\n[thread-loader](https://github.com/webpack-contrib/thread-loader) 为官方推荐的开启多进程的 `loader`，可对 babel 解析 AST 时开启多线程处理，提升编译的性能。\r\n\r\n``` js\r\nmodule.exports={\r\n  module:{\r\n    rules:[\r\n      {\r\n        test:/\\.js$/,\r\n        use:[\r\n          {\r\n            loader: 'thread-loader',\r\n            options: {\r\n              workers: 8\r\n            }\r\n          },\r\n          'babel-loader'\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n}\r\n```\r\n\r\n在 `webpack4` 中，可使用 [happypack plugin](https://github.com/amireh/happypack)，但需要注意的是 `happypack` 已经久不维护了。",
           "star": {
             "totalCount": 0
           },

deploy/simple-intro.md

@@ -69,7 +69,7 @@ Keep-Alive: timeout=5
 
 以下是对**hello版前端应用**的 HTTP 请求及响应报文的图文表示
 
-![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-02-24/simple-deploy.67a117.webp)
+![](https://static.shanyue.tech/images/22-05-25/clipboard-9525.6bbfcd.webp)
 
 好，那接下来我们写一段服务器代码，用以响应 HTML。
 
@@ -127,7 +127,7 @@ Listening 3000
 
 启动服务后，在浏览器端打开 `localhost:3000`，可查看到响应头及响应体 `hello, shanyue`。
 
-![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2021-12-31/clipboard-3621.529aef.webp)
+![](https://static.shanyue.tech/images/22-05-25/clipboard-1233.d58ef2.webp)
 
 **恭喜你，部署成功！**
 
@@ -171,9 +171,20 @@ $ node server-fs.js
 Listening 3000
 ```
 
+## 为什么需要专业的静态资源服务器
+
 当然，对于前端这类纯静态资源，**自己写代码无论从开发效率还是性能而言都是极差的**，这也是我们为何要求助于专业工具 nginx 之类进行静态资源服务的原因所在。
 
-试举一例，比如将文件系统修改为 `ReadStream` 的形式进行响应将会提升该静态服务器的性能，代码如下。
+第一、**从开发而言**，其基本的 Rewrite、Redirect 都需要重新开发，而一个稍微完备的静态资源服务器需要满足以下功能，这也是本文的作业内容。
+
+![静态资源服务器目标功能](https://static.shanyue.tech/images/22-05-25/static-server.85e1d1.webp)
+
+其中，Rewrite 的场景使用十分广泛，比如:
+
+1. 单页应用中所有的 `*.html` 均为读取根目录 index.html
+2. vuepress 等静态网站生成器将会有 .html 后缀，此时可通过 Rewrite 去除后缀。比如，将 `/hello` 重写(rewrite)到 `/hello.html`。(去除后缀名的功能也叫 cleanUrls，vercel)
+
+第二、**从性能出发**，试举一例，比如将文件系统修改为 `ReadStream` 的形式进行响应将会提升该静态服务器的性能，代码如下。
 
 ```js
 const server = http.createServer((req, res) => {
@@ -190,7 +201,7 @@ $ npx serve .
 
 `serve` 是 `next.js` 的母公司 `vercel` 开发的一款静态资源服务器。作为前端久负盛名的静态服务器，广泛应用在现代前端开发中，如在 `create-react-app` 构建成功后，它会提示使用 `serve` 进行部署。本地环境而言，还是 [serve](https://github.com/vercel/serve) 要方便很多啊。
 
-![Creact React APP 构建后，提示使用 serve 进行部署](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2021-12-31/clipboard-3980.619061.webp)
+![Creact React APP 构建后，提示使用 serve 进行部署](https://static.shanyue.tech/images/22-05-25/clipboard-7803.748bd9.webp)
 
 **然而，Javascript 的性能毕竟有限，使用 `nginx` 作为静态资源服务器拥有更高的性能。**
 
@@ -218,7 +229,7 @@ $ npx serve .
 
 当然，如果你不介意别人通过端口号去访问你的应用，不用 nginx 等反向代理器也是可以的。
 
-![反向代理](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-02-24/Nginx.632fa5.webp)
+![反向代理](https://static.shanyue.tech/images/22-05-25/clipboard-3787.b7b3ed.webp)
 
 关于 nginx 的学习可以查看后续章节。
 
@@ -244,6 +255,12 @@ $ npx serve .
 
 关于 docker 的学习可以查看后续章节。
 
+## 作业
+
++ 初阶: 继续完善静态服务器，使其基于 stream，并能给出正确的 Content-Length。
++ 高阶: 继续完善静态服务器，使其作为一个命令行工具，支持指定端口号、读取目录、404、stream，甚至 trailingSlash、cleanUrls、rewrite、redirect 等。可参考 [serve-handler](https://github.com/vercel/serve-handler)。
++ 面试: 了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令。
+
 ## 小结
 
 本篇文章介绍了了一些对于前端部署的简单介绍，并使用 nodejs 写了两段代码用以提供静态服务，加深对前端部署的理解。虽然我们可自写代码对前端静态资源进行部署，但从功能性与性能而讲，都是远不如专业工具的。

deploy/train.md

@@ -39,7 +39,9 @@
 1. CICD: 使用 CI 实现功能分支测试环境 Preview。**必须需要**个人服务器及个人域名。
 1. k8s: 简单概念介绍及使用 k8s 部署前端应用。可本地使用 minikube 进行模拟。
 
-**另外，参加训练训练营后，需要做好用功的准备，它将占用一段宝贵的下班时间，平均每周三个小时。**
+**另外，参加训练营后，需要做好用功的准备，它将占用一段宝贵的下班时间，平均每周三个小时。**
+
+**另外，训练营开营前，尽量补充自己关于 Docker 的前置知识**
 
 ## 作业
 

engineering/738.md

@@ -58,7 +58,7 @@ module: {
 
 **得益于持久化缓存，二次编译甚至可得到与 Unbundle 的 vite 等相近的开发体验**
 
-在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@depcrated` 状态。
+在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@deprecated` 状态。
 
 ```js
 module.exports = {

fe/webpack/738.md

@@ -63,7 +63,7 @@ module: {
 
 **得益于持久化缓存，二次编译甚至可得到与 Unbundle 的 vite 等相近的开发体验**
 
-在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@depcrated` 状态。
+在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@deprecated` 状态。
 
 ```js
 module.exports = {