perf(mock): when mock is not used, move mock.js out of the package file

.env.production

@@ -1,5 +1,5 @@
 # Whether to open mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # public path
 VITE_PUBLIC_PATH = /

CHANGELOG.zh_CN.md

@@ -4,6 +4,10 @@
 
 - `ApiSelect`新增 `numberToString`属性,用于将 value 为`number`的值全部转化为`string`
 
+### ⚡ Performance Improvements
+
+当不使用 mock 时,将 `mock.js` 移出打包文件
+
 ### 🐛 Bug Fixes
 
 - 修复 modal 高度计算错误

build/vite/plugin/html.ts

@@ -9,6 +9,7 @@ import { GLOB_CONFIG_FILE_NAME } from '../../constant';
 export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
   const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
   const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
+
   const htmlPlugin: Plugin[] = html({
     minify: isBuild,
     inject: {

build/vite/plugin/index.ts

@@ -2,16 +2,15 @@ import type { Plugin } from 'vite';
 
 import PurgeIcons from 'vite-plugin-purge-icons';
 
-import visualizer from 'rollup-plugin-visualizer';
-
 // @ts-ignore
 import pkg from '../../../package.json';
-import { ViteEnv, isReportMode } from '../../utils';
+import { ViteEnv } from '../../utils';
 import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
 import { configGzipPlugin } from './gzip';
-import { configStyleImportConfig } from './style-import';
+import { configStyleImportConfig } from './styleImport';
+import { configVisualizerConfig } from './visualizer';
 
 // gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: string) {
@@ -36,14 +35,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: stri
   vitePlugins.push(configGzipPlugin(isBuild));
 
   // rollup-plugin-visualizer
-  if (isReportMode()) {
-    vitePlugins.push(
-      visualizer({
-        filename: './build/.cache/stats.html',
-        open: true,
-      }) as Plugin
-    );
-  }
+  vitePlugins.push(configVisualizerConfig());
 
   return vitePlugins;
 }

build/vite/plugin/mock.ts

@@ -4,14 +4,21 @@ import { ViteEnv } from '../../utils';
 export function configMockPlugin(env: ViteEnv, isBuild: boolean) {
   const { VITE_USE_MOCK } = env;
 
-  const useMock = !isBuild && VITE_USE_MOCK;
+  const useLocalMock = !isBuild && VITE_USE_MOCK;
+  const useProdMock = isBuild && VITE_USE_MOCK;
 
-  if (useMock) {
+  if (useLocalMock || useProdMock) {
     const mockPlugin = viteMockServe({
       ignore: /^\_/,
       mockPath: 'mock',
       showTime: true,
-      localEnabled: useMock,
+      localEnabled: useLocalMock,
+      prodEnabled: useProdMock,
+      injectCode: `
+      import { setupProdMockServer } from '../mock/_createProductionServer';
+
+      setupProdMockServer();
+      `,
     });
     return mockPlugin;
   }

build/vite/plugin/visualizer.ts

@@ -0,0 +1,12 @@
+import visualizer from 'rollup-plugin-visualizer';
+import { isReportMode } from '../../utils';
+
+export function configVisualizerConfig() {
+  if (isReportMode()) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+    }) as Plugin;
+  }
+  return [];
+}

package.json

@@ -10,7 +10,7 @@
     "report": "cross-env REPORT=true npm run build ",
     "preview": "npm run build && esno ./build/script/preview.ts",
     "preview:dist": "esno ./build/script/preview.ts",
-    "log": "conventional-changelog -p custom-config -i CHANGELOG.md -s -r 0",
+    "log": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
     "clean:lib": "npx rimraf node_modules",
     "typecheck": "vuedx-typecheck .",
@@ -72,7 +72,6 @@
     "autoprefixer": "^10.2.3",
     "commitizen": "^4.2.3",
     "conventional-changelog-cli": "^2.1.1",
-    "conventional-changelog-custom-config": "^0.3.1",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "eslint": "^7.18.0",
@@ -89,7 +88,6 @@
     "portfinder": "^1.0.28",
     "postcss": "^8.2.4",
     "postcss-import": "^14.0.0",
-    "postcss-nested": "^5.0.3",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
     "rollup-plugin-gzip": "^2.5.0",
@@ -101,8 +99,8 @@
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3",
     "vite": "2.0.0-beta.36",
-    "vite-plugin-html": "^2.0.0-beta.5",
-    "vite-plugin-mock": "^2.0.0-beta.3",
+    "vite-plugin-html": "^2.0.0-beta.6",
+    "vite-plugin-mock": "^2.0.0-rc.2",
     "vite-plugin-purge-icons": "^0.5.2",
     "vite-plugin-pwa": "^0.3.9",
     "vite-plugin-style-import": "^0.4.6",
@@ -118,12 +116,6 @@
     "url": "https://github.com/anncwb/vue-vben-admin/issues"
   },
   "homepage": "https://github.com/anncwb/vue-vben-admin",
-  "changelog": {
-    "bugsUrl": "https://github.com/anncwb/vue-vben-admin/issues",
-    "emojis": true,
-    "authorName": false,
-    "authorEmail": false
-  },
   "husky": {
     "hooks": {
       "pre-commit": "ls-lint && lint-staged",

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    'postcss-nested': {},
     'postcss-import': {},
     autoprefixer: {},
   },

src/main.ts

@@ -6,11 +6,10 @@ import { setupStore } from '/@/store';
 import { setupErrorHandle } from '/@/logics/error-handle';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
-import { setupProdMockServer } from '../mock/_createProductionServer';
 
 import { registerGlobComp } from '/@/components/registerGlobComp';
 
-import { isDevMode, isProdMode, isUseMock } from '/@/utils/env';
+import { isDevMode } from '/@/utils/env';
 
 import '/@/design/index.less';
 
@@ -42,8 +41,3 @@ if (isDevMode()) {
   app.config.performance = true;
   window.__APP__ = app;
 }
-
-// If you do not need to setting the mock service in the production environment, you can comment the code
-if (isProdMode() && isUseMock()) {
-  setupProdMockServer();
-}

yarn.lock

@@ -3400,10 +3400,10 @@ dateformat@^3.0.0:
   resolved "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-dayjs@^1.10.1:
-  version "1.10.2"
-  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.2.tgz#8f3a424ceb944a8193506804b0045a773d2d0672"
-  integrity sha512-h/YtykNNTR8Qgtd1Fxl5J1/SFP1b7SOk/M1P+Re+bCdFMV0IMkuKNgHPN7rlvvuhfw24w0LX78iYKt4YmePJNQ==
+dayjs@^1.10.3:
+  version "1.10.3"
+  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.3.tgz#cf3357c8e7f508432826371672ebf376cb7d619b"
+  integrity sha512-/2fdLN987N8Ki7Id8BUN2nhuiRyxTLumQnSQf9CNncFCyqFsSKb9TNhzRYcC8K8eJSJOKvbvkImo/MKKhNi4iw==
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -6588,13 +6588,6 @@ postcss-modules@^3.2.2:
     postcss-modules-values "^3.0.0"
     string-hash "^1.1.1"
 
-postcss-nested@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.3.tgz#2f46d77a06fc98d9c22344fd097396f5431386db"
-  integrity sha512-R2LHPw+u5hFfDgJG748KpGbJyTv7Yr33/2tIMWxquYuHTd9EXu27PYnKi7BxMXLtzKC0a0WVsqHtd7qIluQu/g==
-  dependencies:
-    postcss-selector-parser "^6.0.4"
-
 postcss-resolve-nested-selector@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
@@ -8320,28 +8313,28 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vite-plugin-html@^2.0.0-beta.5:
-  version "2.0.0-beta.5"
-  resolved "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-2.0.0-beta.5.tgz#89bf3a9a2daef30f4c2d133091e85829243a9160"
-  integrity sha512-S3aJ9dqP7hxNYO3LCSnm2OgzsLzPNwgc0pq2ToL5EKDOIcs5+E4Ubb97vKfi3s5UjU/XkhkZBQcbeqMR4f51XQ==
+vite-plugin-html@^2.0.0-beta.6:
+  version "2.0.0-beta.6"
+  resolved "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-2.0.0-beta.6.tgz#468c7f0af73ae32f2018265e3b1314b12466ff20"
+  integrity sha512-oHV+boqFmFs25FgeuyIrNbAtwGvywYwFA+6wHx+YhXP4HzrQv4mXP71we1HM+YRRc3hhKy+HLsiLke6XCgZJ3A==
   dependencies:
     ejs "^3.1.5"
     html-minifier-terser "^5.1.1"
 
-vite-plugin-mock@^2.0.0-beta.3:
-  version "2.0.0-beta.3"
-  resolved "https://registry.npmjs.org/vite-plugin-mock/-/vite-plugin-mock-2.0.0-beta.3.tgz#5276b86734106ccd7aaa299bfb0d16a86c8d2823"
-  integrity sha512-LfgXV3Mzulz89OfuXysxLpnyu66mDiFAeBjwx24N/OiEyZEHagbVRVOJU8Xz/oTmtH7EP/AyrYjQFRb2elQ0BQ==
+vite-plugin-mock@^2.0.0-rc.2:
+  version "2.0.0-rc.2"
+  resolved "https://registry.npmjs.org/vite-plugin-mock/-/vite-plugin-mock-2.0.0-rc.2.tgz#02aacfd90617c4584df54b6c457832ba9b9f90fa"
+  integrity sha512-MfQJc5eGqBmZ8mudT5+Y55wfISBgFebBjrUe4fDAKSFxKTIZ6Dz8KRAQJl82GQRENjoWhcF6kt70azrdZGwM9w==
   dependencies:
     "@rollup/plugin-node-resolve" "^11.0.1"
     body-parser "^1.19.0"
     chalk "^4.1.0"
     chokidar "^3.4.3"
     connect "^3.7.0"
-    dayjs "^1.10.1"
+    dayjs "^1.10.3"
     debug "^4.3.1"
     esbuild "^0.8.29"
-    glob "^7.1.6"
+    fast-glob "^3.2.5"
     rollup "^2.35.1"
     rollup-plugin-esbuild "^2.6.1"