奇舞周刊第498期：结合 Docker，快速掌握 Nginx 2 大核心用法

记得点击文章末尾的“ 阅读原文 ”查看哟~

下面先一起看下本期周刊 摘要 吧~

奇舞推荐

■ ■ ■

 结合 Docker，快速掌握 Nginx 2 大核心用法

Nginx 是流行的服务器，一般用它对静态资源做托管、对动态资源做反向代理。Docker 是流行的容器技术，里面可以跑任何服务。那 Docker + Nginx 如何结合使用呢？

 TypeScript 5.2 beta 发布：using 关键字、装饰器元数据、元组匿名与具名元素混用

TypeScript 已于 2023.0630 发布 5.2 beta 版本，你可以在 5.2 Iteration Plan 查看所有被包含的 Issue 与 PR。如果想要抢先体验新特性，执行：$ npm install typescript@beta 来安装 beta 版本的 TypeScript，或在 VS Code 中安装 JavaScript and TypeScript Nightly 来更新内置的 TypeScript 支持。

 完美搭配，微前端与 Monorepo 的架构设计

本文主要介绍了微前端和 Monorepo 的架构设计，探讨了它们之间如何搭配，并介绍了 Micro App + pnpm 的使用案例，最后，讲解了如何使用 Docker + nginx 进行本机测试环境，完整的走完了一个微前端项目的全部流程。

技术实践

■ ■ ■

 【Vuejs】1732- 详细聊一聊 Vue3 依赖注入

Vue.js 中，依赖注入 [1](DI) 是一种非常常见的跨组件传递数据的方法，它可以帮助我们更好地管理组件之间的依赖关系。本文将介绍 Vue3 中的依赖注入机制，包括 provide () 和 inject () 函数的使用方法、使用注意以及优缺点和适用场景等方面的内容。

 让你 React 组件水平暴增的 5 个技巧

最近看了一些 Ant Design 的组件源码，学到一些很实用的技巧，这篇文章来分享一下。这篇文章总结了 ant design 组件源码里的 5 个技巧：透传 className、style，还有其他 html 标签的 props，让你的组件用起来体验和原生 html 标签一样 通过 forwardRef + useImperativeHandle 暴露一些方法，每个组件都可以通过 ref 暴露一些 api 出来 useCallback、useMemo 缓存计算结果，通过让 props 不变来减少没必要的渲染 用 Context 的 Provider + useContext 来跨组件传递值，可以用来传递全局配置，也可以用来做业务组件的跨层传递数据 通过 React.Children + React.cloneElement 的 api 对 props.children 做各种修改 这些都是在 antd 里随处可见的技巧，可以说任何一个组件里都有这些东西。这些写 React 组件的技巧你都用过么？没用过的话不妨从今天开始用起来吧。

 如何删除未使用的 CSS 代码？

随着前端项目的不断迭代，就可能出现部分 CSS 代码未使用的情况。这些未使用代码就可能影响应用性能。那么，如何有效地删除未使用的 CSS 代码呢？本文将介绍一种强大的工具——PurgeCSS，它可以自动检测和删除未使用的 CSS 代码。无论是在 Vue、React 还是其他前端框架中，PurgeCSS 都能轻松集成。

拓展边界

■ ■ ■

 如何方便的检测 React 项目的性能？

对于长期迭代的 React 项目，性能是不能忽视的问题。通常我们通过：React-Dev-Tools 的 Profiler 面板 一些第三方工具，比如 why-did-you-render 检测运行时性能瓶颈。实际上，React 本身就内置了性能检测组件——Profiler，可以很方便的检测 React 项目的性能。

 分享 10 个你可能不知道的 Devtools 技巧！

今天跟大家来分享几个实用的 Devtools 技巧。比如编辑并重新发送网络请求；下载页面上的所有图片；更改视频的播放速度等等。

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。