perf: optimize for some details and comments

Author: anncwb

.github/workflows/ci.yml

@@ -5,7 +5,6 @@ on:
   push:
     branches:
       - main
-      - master
       - "releases/*"
 
 permissions:
@@ -25,8 +24,8 @@ jobs:
         node-version: [20]
         os:
           - ubuntu-latest
-          # - macos-latest
-          # - windows-latest
+          - macos-latest
+          - windows-latest
     timeout-minutes: 20
     steps:
       - name: Checkout code

.github/workflows/semantic-pull-request.yml

@@ -9,7 +9,6 @@ on:
 
 jobs:
   main:
-    if: github.repository == 'vitejs/vite'
     runs-on: ubuntu-latest
     name: Semantic Pull Request
     steps:

deploy/nginx.conf

@@ -6,7 +6,7 @@
 
 ## 原理
 
-由 `vite-plugin-inject-app-loading` 插件实现，插件会在每个页面的注入一个全局的 loading html。
+由 `vite-plugin-inject-app-loading` 插件实现，插件会在每个应用的注入一个全局的 `loading html`。
 
 ## 关闭
 

docs/src/guide/in-depth/loading.md

@@ -15,8 +15,8 @@ import { getCommonConfig } from './common';
 
 function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
   return defineConfig(async (config) => {
-    const { appTitle, base, port, ...envConfig } = await loadAndConvertEnv();
     const options = await userConfigPromise?.(config);
+    const { appTitle, base, port, ...envConfig } = await loadAndConvertEnv();
     const { command, mode } = config;
     const { application = {}, vite = {} } = options || {};
     const root = process.cwd();
@@ -78,16 +78,16 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
         port,
         warmup: {
           // 预热文件
-          clientFiles: ['./index.html', './src/{views,layouts}/*'],
+          clientFiles: ['./index.html', './src/{views,layouts,router,store}/*'],
         },
       },
     };
 
-    const mergedConfig = mergeConfig(
+    const mergedCommonConfig = mergeConfig(
       await getCommonConfig(),
       applicationConfig,
     );
-    return mergeConfig(mergedConfig, vite);
+    return mergeConfig(mergedCommonConfig, vite);
   });
 }
 

internal/vite-config/src/config/application.ts

@@ -13,8 +13,8 @@ function defineLibraryConfig(userConfigPromise?: DefineLibraryOptions) {
   return defineConfig(async (config: ConfigEnv) => {
     const options = await userConfigPromise?.(config);
     const { command, mode } = config;
-    const root = process.cwd();
     const { library = {}, vite = {} } = options || {};
+    const root = process.cwd();
     const isBuild = command === 'build';
 
     const plugins = await loadLibraryPlugins({
@@ -52,8 +52,8 @@ function defineLibraryConfig(userConfigPromise?: DefineLibraryOptions) {
       plugins,
     };
     const commonConfig = await getCommonConfig();
-    const mergedConfig = mergeConfig(commonConfig, packageConfig);
-    return mergeConfig(mergedConfig, vite);
+    const mergedConmonConfig = mergeConfig(commonConfig, packageConfig);
+    return mergeConfig(mergedConmonConfig, vite);
   });
 }
 

internal/vite-config/src/config/library.ts

@@ -28,12 +28,12 @@ const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
 const defaultImportmapOptions: ImportmapPluginOptions = {
   // 通过 Importmap CDN 方式引入,
   // 目前只有esm.sh源兼容性好一点，jspm.io对于 esm 入口要求高
-  defaultProvider: 'jspm.io',
+  defaultProvider: 'esm.sh',
   importmap: [
     { name: 'vue' },
     { name: 'pinia' },
     { name: 'vue-router' },
-    { name: 'vue-i18n' },
+    // { name: 'vue-i18n' },
     { name: 'dayjs' },
     { name: 'vue-demi' },
   ],

internal/vite-config/src/options.ts

@@ -1,3 +1,3 @@
 # inject-app-loading
 
-用于在应用加载时显示加载动画的插件。可自行选择加载动画的样式。
+用于在应用加载时显示加载动画的插件，可自行选择加载动画的样式。

internal/vite-config/src/plugins/inject-app-loading/README.md

@@ -25,7 +25,7 @@
     pointer-events: none;
     visibility: hidden;
     opacity: 0;
-    transition: all 0.6s ease-out;
+    transition: all 1s ease-out;
   }
 
   .dark .loading {

internal/vite-config/src/plugins/inject-app-loading/default-loading.html

@@ -52,19 +52,15 @@ async function viteInjectAppLoadingPlugin(
  * 用于获取loading的html模板
  */
 async function getLoadingRawByHtmlTemplate(loadingTemplate: string) {
-  const __dirname = fileURLToPath(new URL('.', import.meta.url));
-  const defaultLoadingPath = join(__dirname, './default-loading.html');
   // 支持在app内自定义loading模板，模版参考default-loading.html即可
-  const appLoadingPath = join(process.cwd(), loadingTemplate);
-  let loadingPath = defaultLoadingPath;
+  let appLoadingPath = join(process.cwd(), loadingTemplate);
 
-  if (fs.existsSync(appLoadingPath)) {
-    loadingPath = appLoadingPath;
-    return;
+  if (!fs.existsSync(appLoadingPath)) {
+    const __dirname = fileURLToPath(new URL('.', import.meta.url));
+    appLoadingPath = join(__dirname, './default-loading.html');
   }
 
-  const htmlRaw = await fsp.readFile(loadingPath, 'utf8');
-  return htmlRaw;
+  return await fsp.readFile(appLoadingPath, 'utf8');
 }
 
 export { viteInjectAppLoadingPlugin };

internal/vite-config/src/plugins/inject-app-loading/index.ts

@@ -74,13 +74,13 @@ interface CommonPluginOptions {
 }
 
 interface ApplicationPluginOptions extends CommonPluginOptions {
-  /** 开启 gzip 压缩 */
+  /** 开启 gzip|brotli 压缩 */
   compress?: boolean;
   /** 压缩类型 */
   compressTypes?: ('brotli' | 'gzip')[];
   /** 在构建的时候抽离配置文件 */
   extraAppConfig?: boolean;
-  /** html 插件配置 */
+  /** 是否开启html插件  */
   html?: boolean;
   /** 是否开启i18n */
   i18n?: boolean;
@@ -98,7 +98,7 @@ interface ApplicationPluginOptions extends CommonPluginOptions {
   nitroMock?: boolean;
   /** nitro mock 插件配置 */
   nitroMockOptions?: NitroMockPluginOptions;
-  /** dev是否开启mock服务 */
+  /** 开启控制台自定义打印 */
   print?: boolean;
   /** 打印插件配置 */
   printInfoMap?: PrintPluginOptions['infoMap'];

internal/vite-config/src/typing.ts

@@ -19,14 +19,6 @@ const STORAGE_KEY = 'preferences';
 const STORAGE_KEY_LOCALE = `${STORAGE_KEY}-locale`;
 const STORAGE_KEY_THEME = `${STORAGE_KEY}-theme`;
 
-function isDarkTheme(theme: string) {
-  let dark = theme === 'dark';
-  if (theme === 'auto') {
-    dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  }
-  return dark;
-}
-
 class PreferenceManager {
   private cache: null | StorageManager = null;
   // private flattenedState: Flatten<Preferences>;
@@ -39,6 +31,7 @@ class PreferenceManager {
   constructor() {
     this.cache = new StorageManager();
 
+    // 避免频繁的操作缓存
     this.savePreferences = useDebounceFn(
       (preference: Preferences) => this._savePreferences(preference),
       150,
@@ -58,7 +51,6 @@ class PreferenceManager {
   /**
    * 处理更新的键值
    * 根据更新的键值执行相应的操作。
-   *
    * @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
    */
   private handleUpdates(updates: DeepPartial<Preferences>) {
@@ -124,7 +116,7 @@ class PreferenceManager {
         this.updatePreferences({
           theme: { mode: isDark ? 'dark' : 'light' },
         });
-        updateCSSVariables(this.state);
+        // updateCSSVariables(this.state);
       });
   }
 
@@ -232,4 +224,4 @@ class PreferenceManager {
 }
 
 const preferencesManager = new PreferenceManager();
-export { isDarkTheme, PreferenceManager, preferencesManager };
+export { PreferenceManager, preferencesManager };

packages/@core/preferences/src/preferences.ts

@@ -115,4 +115,4 @@ function isDarkTheme(theme: string) {
   return dark;
 }
 
-export { updateCSSVariables };
+export { isDarkTheme, updateCSSVariables };

packages/@core/preferences/src/update-css-variables.ts

@@ -2,7 +2,8 @@ import { computed } from 'vue';
 
 import { diff } from '@vben-core/shared';
 
-import { isDarkTheme, preferencesManager } from './preferences';
+import { preferencesManager } from './preferences';
+import { isDarkTheme } from './update-css-variables';
 
 function usePreferences() {
   const preferences = preferencesManager.getPreferences();

packages/@core/preferences/src/use-preferences.ts

@@ -209,7 +209,7 @@ export function useElementPlusDesignTokens() {
         '--el-text-color-primary': getCssVariableValue('--foreground'),
         '--el-text-color-regular': getCssVariableValue('--foreground'),
       };
-      updateCSSVariables(variables, `__vben_ele_styles__`);
+      updateCSSVariables(variables, `__vben_design_styles__`);
     },
     { immediate: true },
   );

packages/effects/hooks/src/use-design-tokens.ts

@@ -3,6 +3,7 @@
  * 放在这里是而不是放在 index.html 的app标签内，是因为这样比较不会生硬，渲染过快可能会有闪烁
  * 通过先添加css动画隐藏，在动画结束后在移除loading节点来改善体验
  * 不好的地方是会增加一些代码量
+ * 自定义loading可以见：https://doc.vben.pro/guide/in-depth/loading.html
  */
 export function unmountGlobalLoading() {
   // 查找全局 loading 元素

packages/utils/src/helpers/unmount-global-loading.ts

@@ -20,7 +20,7 @@ export async function run(options: RunOptions) {
 
   // 只显示有对应命令的包
   const selectPkgs = packages.filter((pkg) => {
-    return (pkg?.packageJson as Record<string, any>).scripts?.[command];
+    return (pkg?.packageJson as Record<string, any>)?.scripts?.[command];
   });
 
   const selectPkg = await select<any, string>({