Skip to main content

功能和思考

1. 🎨 CSSModule​

当前 CSS 输出为 [5 位随机数]-[CSS 名称]: NHTda-CoreSessionArea 、cKQbb-TextBox

CSS 名称是通过业务和当前目录来确定的，所以实际上 CSS 名称本身不会重复，加随机数是为了加强 CSS 名字的唯一性。 当我们在调 CSS 的时候可以复制 [CSS名称] 快速定位到具体文件。

2. 🧩 SVG 雪碧图 loader​

根据我的经验，SVG 文件 一般是由 UI 设计提供，也会在一些 SVG 库中复制，而且 SVG 图是要根据主题切换动态调整颜色，所以它不能是一个 PNG, 往往会和 JS 文件打包在一起使用。

  • 问题：文件数量过多会导致 js 打包后的体积过大，影响首屏加载速度。
  • 解决办法：可以通过 webpack.config.js 设置分割包的方式将 asset 目录拆出来。

3. 🗂️ 静态资源处理​

public 目录内的资源已自动复制到打包后的目录(dist)中了

4. 🔗 @别名​

@别名配置 已设置src为根目录

import Routers from '@/router/index';

5. 🌀 PostCSS (tailwindcss)​

由于antd组件库

  • 不能拆包下载引入；
  • antd.min.css 文件体积过大导致首屏加载不理想（处理闪烁需要配置许多额外的 css）；
  • 组件样式设置不灵活、无法高度定制；
  • 新版组件库不兼容 chrome8+（需要配置 css-in-js）,比如message模块弹出后不消失；
  • 需要单独配置国际化；
  • 等等问题；

现采用tailwindcss+shadcn/ui解决方案, 根据当下样式配置动态生成所需的 css,可以极大减小包体，极大缩减首屏加载时间，而且组件库可以高度定制, 能够最大限度的贴合业务。

6. ✍️ Babel (JS、TS)​

组件库使用 TS 开发, 项目页面和组件使用 JS 因为开发快，并且都是使用公共组件库开发。

7. 🧼 CSS 压缩，JS 压缩，处理 debugger、console、注释处理​

已将 debugger, console 等删除

8. 🧱 代码分割​

代码分割要根据引入的包来确定，可以通过 qgtools 的 -split 命令查看打包后的分包情况。

qgtools buildapp -split

9. 🧱 <script> 标签倒序​

按权重分割后 Script 标签也会按权重顺序 引入 html, 但是首屏加载需白屏等待 main.js 加载完毕后才会渲染, 而 main.js 又被写到了最后，所以我写了一个自定义插件 将 main.js 和 base.js 在最开始引入 可以缩减白屏等待时间。

lighthouse