20240115 前端开发日报

认识webpack | webpack作用 | webpack配置；前端性能优化手册 – RoadMap；Less 和 SCSS，哪一个更适合你？；学习鸿蒙，不能错过关键问题解密，助你事半功倍 、napi-rs如何让Rust与JavaScript可以相互调用 | 酱酱的下午茶第 306 期；React的路由配置；ant design vue createFromIconfontCN中的scriptUrl引入本地文件方案；Vue学习计划-Vue3–其他API：shallowRef与shallowReactive、readonly与shallowReadonly、toRaw与markRaw、customRef；React全局状态管理

1. 认识webpack | webpack作用 | webpack配置

   webpack说难很难，说简单也简单，难主要是loader和plugin模块 webpack是目前用的最多的构建工具，它不是个框架，webpack就是个打包工具，给项目做压缩处理，此前我介绍过vite

2. 前端性能优化手册 – RoadMap

   本文旨在把常见的前端性能优化的手段归类整理，画大图，供大家在自己的自测流程中参考。对于性能优化，并不是说有了优化总结这张大图，就不管开发什么项目都对着来一遍。优化是有场景与前提的，「乱优化不如不优化」

3. Less 和 SCSS，哪一个更适合你？

   在前端开发的世界里，CSS 预处理器已经成为了一个不可或缺的工具，它们扩展了 CSS 的功能，使得样式编写变得更加高效和可维护。在众多预处理器中，Less 和 SCSS 无疑是最受欢迎的两个。

4. 学习鸿蒙，不能错过关键问题解密，助你事半功倍 、napi-rs如何让Rust与JavaScript可以相互调用 | 酱酱的下午茶第 306 期

   看点：前端Rust生态的背后，napi-rs如何让Rust与JavaScript可以相互调用、前端性能优化：封装一个通用的懒加载组件、学习鸿蒙，不能错过关键问题解密，助你事半功倍、Hikari源码分析

5. React的路由配置

   文章浏览阅读112次，点赞3次，收藏3次。在src目录下新建一个Router/index.js文件用于管理路由，这里需要引入一些对应的组件，比如首页啊，关于我们页面啊之类的页面，还有路由包文件。react-router：是基本的router包，里边函的内容较多，但是在网页开发中有很多用不到，现在的市面上的课程讲的基本都是这个包的教程。react-router-dom：随着react生态环境的壮大，后出现的包，这个包比react-router包轻巧了很多。Route的props path为路径，component为路径对应的页面。

6. ant design vue createFromIconfontCN中的scriptUrl引入本地文件方案

   文章浏览阅读114次，点赞4次，收藏3次。背景说明：本项目使用vue 3，ant design vue v5，vite 构建。本篇博客实现ant design vue中提供的createFromIconfontCN方法引入本地文件的方案。如果你想要直接了解解决方案，那么你可以将上文中的替换成来实现，这样就可以导入本地的文件。下面是详细的解决方案。

7. Vue学习计划-Vue3–其他API：shallowRef与shallowReactive、readonly与shallowReadonly、toRaw与markRaw、customRef

   文章浏览阅读394次，点赞12次，收藏11次。通过使用 shallowRef()和 shallowReactive()来绕开深度响应。浅层式。

8. React全局状态管理

   文章浏览阅读220次，点赞3次，收藏2次。redux是一个状态管理框架，它可以帮助我们清晰定义state和处理函数，提高可读性，并且redux中的状态是全局共享，规避组件间通过props传递状态等操作。