集成npm包中二次封装的element-ui

最近因工作需要而制定一些规范以及封装组件库和基础框架搭建，在项目中我负责规范制定和基础框架搭建，element-ui组件二次封装使用npm包方式集成，但组件仍在开发阶段，故导出的均是源码方式。

在安装ui插件时，内部已经集成了element-ui库，故不需要再重新安装element-ui，因要重写ui主题样式和重新element-ui的css样式，故仍需引入npm包内部的样式文件。

1
2
3
//main.ts
import 'xxx/xxx.css'

但由于内部引入element-ui样式scss的源文件，并且使用@forward 进行了主题颜色的修改。

在引入此样式文件时，基础框架上还使用了scss全局样式文件，此时导致了@forward rules must be written before any other rules的错误。

此时可修改导入方式进行解决：

1
2
3
4
5
6
7
8
9
10
//vite.config.ts 配置
//使用`@use 'xxx.css' as *`
css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "xxx/style.css" as *;@use "@/assets/style/xxxx.scss" as *;`,
          charset: false
        }
      }
    }

但问题又出现了，此时项目的首次加载速度非常慢，虽然vite会自动开启缓存策略保存到node_module/.vite目录下，使得下一次加载飞快。但第一次加载仍然是非常慢，打开控制台发现npm包里的组件加载一个需要十几秒甚至半分钟之久，尤其是在我加了路由缓存标签之后，速度感人（笑出声…），虽然打包预览的速度毫不影响。但对于开发者来说(也就是我团队成员，看到他们的表情…噗)。

由此百思不得其姐，逐步排查原因，功夫不负有心人（他们已经快忍不住了…），被我找到了问题根源，就是那该死的样式导入的是element-ui的源码文件，导致浏览器在加载样式时需要花大量时间去编译这些scss文件。

最后把npm包里的样式导入改成导入编译后的文件。此时，你以为问题就解决了？此时的样式重写和主题颜色不生效了。

按照element官方文档说明，此时需要使用unplugin-element-plus/vite插件进行配置，并且导入的编译后的样式文件需要在定制npm包插件中使用import方式引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 插件包的文件入口文件中
import "element-plus/dist/index.css"


// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'

plugins: [
    vue(),
    ElementPlus({
      useSource: true,
    }),
  ],

到此时缓存样式编译加载时间过长的问题已解决。

但在首次加载依赖时，即登录完成在路由跳转前，由于缓存依赖过多使得热更新重启了项目，使得页面刷新当前路由，即登录页面，导致登录无效。此后的登录均正常，得以正解。