前端换肤功能如何实现

关于换肤

1. 统一的颜色变量，css 变量或者 sass 变量或者 less 变量都可以

2. 通过计算规则生成多种主题，对应上述变量，dark light default 等等

3. 切换主题，加载对应的主题的文件到浏览器，生成变量，挂在到 root 上

如何从工程化角度完成上述三个过程

1. 首先业务系统完全不关心换肤实现，只需要按照固定的一种变量模式（引用变量名需要统一）
2. 再打包构建时分别提取对应的 css 文件和 js 文件
   • css 文件，对应的是变量列表（多种，多套），提取过程主要是在于按需加载，ui 给的变量往往很多且重复的，通过文件提取被引用的，生成 css 变量文件
   • js 文件实现建立换肤通信，以及去加载对应的 css。需要实现动态切换，以及动态创建 style
3. 如何触发切换，方式：
   • window 上挂在一个对应的方法，直接调用 window 的方法，切换病加载对应的 css 文件，创建 style，更改所有的变量对应关系，此时引用变量的值自然就更新了
   • 在 js 中去监听某一个 token 或者 cookie 值，值代表的就是当前的主题名字，当值改变时，监听并且切换成对应的文件
   • 基于 iframe，使用 postMessage 通信，切换对应的主题

如何提取变量

• 通过 loader 解析对应的 sass,css,less 等文件，或者是 vue 文件中的 style
• 匹配出对应的变量，最后对整个文件去重，则获取到了最终的使用变量

问题：

1. 浏览器加载 css 会阻塞 js 进程吗？
2. 加载资源的方式，静态资源和通过接口返回资源，在动态创建标签加载，两种方式有何差别和优缺点？
3. plugin 和 loader 有什么区别？分别是为了去实现一些什么功能？
4. webpack 中的 compiler