Commit 43503d597028926c93e4624d999cad4bbccc75fb

Authored by vben
1 parent c889fb17

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

.env.production
1 # Whether to open mock 1 # Whether to open mock
2 -VITE_USE_MOCK = true 2 +VITE_USE_MOCK = false
3 3
4 # public path 4 # public path
5 VITE_PUBLIC_PATH = / 5 VITE_PUBLIC_PATH = /
CHANGELOG.zh_CN.md
@@ -4,6 +4,10 @@ @@ -4,6 +4,10 @@
4 4
5 - `ApiSelect`新增 `numberToString`属性,用于将 value 为`number`的值全部转化为`string` 5 - `ApiSelect`新增 `numberToString`属性,用于将 value 为`number`的值全部转化为`string`
6 6
  7 +### ⚡ Performance Improvements
  8 +
  9 +当不使用 mock 时,将 `mock.js` 移出打包文件
  10 +
7 ### 🐛 Bug Fixes 11 ### 🐛 Bug Fixes
8 12
9 - 修复 modal 高度计算错误 13 - 修复 modal 高度计算错误
build/vite/plugin/html.ts
@@ -9,6 +9,7 @@ import { GLOB_CONFIG_FILE_NAME } from '../../constant'; @@ -9,6 +9,7 @@ import { GLOB_CONFIG_FILE_NAME } from '../../constant';
9 export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) { 9 export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
10 const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env; 10 const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
11 const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`; 11 const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
  12 +
12 const htmlPlugin: Plugin[] = html({ 13 const htmlPlugin: Plugin[] = html({
13 minify: isBuild, 14 minify: isBuild,
14 inject: { 15 inject: {
build/vite/plugin/index.ts
@@ -2,16 +2,15 @@ import type { Plugin } from 'vite'; @@ -2,16 +2,15 @@ import type { Plugin } from 'vite';
2 2
3 import PurgeIcons from 'vite-plugin-purge-icons'; 3 import PurgeIcons from 'vite-plugin-purge-icons';
4 4
5 -import visualizer from 'rollup-plugin-visualizer';  
6 -  
7 // @ts-ignore 5 // @ts-ignore
8 import pkg from '../../../package.json'; 6 import pkg from '../../../package.json';
9 -import { ViteEnv, isReportMode } from '../../utils'; 7 +import { ViteEnv } from '../../utils';
10 import { configHtmlPlugin } from './html'; 8 import { configHtmlPlugin } from './html';
11 import { configPwaConfig } from './pwa'; 9 import { configPwaConfig } from './pwa';
12 import { configMockPlugin } from './mock'; 10 import { configMockPlugin } from './mock';
13 import { configGzipPlugin } from './gzip'; 11 import { configGzipPlugin } from './gzip';
14 -import { configStyleImportConfig } from './style-import'; 12 +import { configStyleImportConfig } from './styleImport';
  13 +import { configVisualizerConfig } from './visualizer';
15 14
16 // gen vite plugins 15 // gen vite plugins
17 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: string) { 16 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: string) {
@@ -36,14 +35,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: stri @@ -36,14 +35,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: stri
36 vitePlugins.push(configGzipPlugin(isBuild)); 35 vitePlugins.push(configGzipPlugin(isBuild));
37 36
38 // rollup-plugin-visualizer 37 // rollup-plugin-visualizer
39 - if (isReportMode()) {  
40 - vitePlugins.push(  
41 - visualizer({  
42 - filename: './build/.cache/stats.html',  
43 - open: true,  
44 - }) as Plugin  
45 - );  
46 - } 38 + vitePlugins.push(configVisualizerConfig());
47 39
48 return vitePlugins; 40 return vitePlugins;
49 } 41 }
build/vite/plugin/mock.ts
@@ -4,14 +4,21 @@ import { ViteEnv } from '../../utils'; @@ -4,14 +4,21 @@ import { ViteEnv } from '../../utils';
4 export function configMockPlugin(env: ViteEnv, isBuild: boolean) { 4 export function configMockPlugin(env: ViteEnv, isBuild: boolean) {
5 const { VITE_USE_MOCK } = env; 5 const { VITE_USE_MOCK } = env;
6 6
7 - const useMock = !isBuild && VITE_USE_MOCK; 7 + const useLocalMock = !isBuild && VITE_USE_MOCK;
  8 + const useProdMock = isBuild && VITE_USE_MOCK;
8 9
9 - if (useMock) { 10 + if (useLocalMock || useProdMock) {
10 const mockPlugin = viteMockServe({ 11 const mockPlugin = viteMockServe({
11 ignore: /^\_/, 12 ignore: /^\_/,
12 mockPath: 'mock', 13 mockPath: 'mock',
13 showTime: true, 14 showTime: true,
14 - localEnabled: useMock, 15 + localEnabled: useLocalMock,
  16 + prodEnabled: useProdMock,
  17 + injectCode: `
  18 + import { setupProdMockServer } from '../mock/_createProductionServer';
  19 +
  20 + setupProdMockServer();
  21 + `,
15 }); 22 });
16 return mockPlugin; 23 return mockPlugin;
17 } 24 }
build/vite/plugin/style-import.ts renamed to build/vite/plugin/styleImport.ts
build/vite/plugin/visualizer.ts 0 → 100644
  1 +import visualizer from 'rollup-plugin-visualizer';
  2 +import { isReportMode } from '../../utils';
  3 +
  4 +export function configVisualizerConfig() {
  5 + if (isReportMode()) {
  6 + return visualizer({
  7 + filename: './node_modules/.cache/visualizer/stats.html',
  8 + open: true,
  9 + }) as Plugin;
  10 + }
  11 + return [];
  12 +}
package.json
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 "report": "cross-env REPORT=true npm run build ", 10 "report": "cross-env REPORT=true npm run build ",
11 "preview": "npm run build && esno ./build/script/preview.ts", 11 "preview": "npm run build && esno ./build/script/preview.ts",
12 "preview:dist": "esno ./build/script/preview.ts", 12 "preview:dist": "esno ./build/script/preview.ts",
13 - "log": "conventional-changelog -p custom-config -i CHANGELOG.md -s -r 0", 13 + "log": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
14 "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite", 14 "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
15 "clean:lib": "npx rimraf node_modules", 15 "clean:lib": "npx rimraf node_modules",
16 "typecheck": "vuedx-typecheck .", 16 "typecheck": "vuedx-typecheck .",
@@ -72,7 +72,6 @@ @@ -72,7 +72,6 @@
72 "autoprefixer": "^10.2.3", 72 "autoprefixer": "^10.2.3",
73 "commitizen": "^4.2.3", 73 "commitizen": "^4.2.3",
74 "conventional-changelog-cli": "^2.1.1", 74 "conventional-changelog-cli": "^2.1.1",
75 - "conventional-changelog-custom-config": "^0.3.1",  
76 "cross-env": "^7.0.3", 75 "cross-env": "^7.0.3",
77 "dotenv": "^8.2.0", 76 "dotenv": "^8.2.0",
78 "eslint": "^7.18.0", 77 "eslint": "^7.18.0",
@@ -89,7 +88,6 @@ @@ -89,7 +88,6 @@
89 "portfinder": "^1.0.28", 88 "portfinder": "^1.0.28",
90 "postcss": "^8.2.4", 89 "postcss": "^8.2.4",
91 "postcss-import": "^14.0.0", 90 "postcss-import": "^14.0.0",
92 - "postcss-nested": "^5.0.3",  
93 "prettier": "^2.2.1", 91 "prettier": "^2.2.1",
94 "rimraf": "^3.0.2", 92 "rimraf": "^3.0.2",
95 "rollup-plugin-gzip": "^2.5.0", 93 "rollup-plugin-gzip": "^2.5.0",
@@ -101,8 +99,8 @@ @@ -101,8 +99,8 @@
101 "ts-node": "^9.1.1", 99 "ts-node": "^9.1.1",
102 "typescript": "^4.1.3", 100 "typescript": "^4.1.3",
103 "vite": "2.0.0-beta.36", 101 "vite": "2.0.0-beta.36",
104 - "vite-plugin-html": "^2.0.0-beta.5",  
105 - "vite-plugin-mock": "^2.0.0-beta.3", 102 + "vite-plugin-html": "^2.0.0-beta.6",
  103 + "vite-plugin-mock": "^2.0.0-rc.2",
106 "vite-plugin-purge-icons": "^0.5.2", 104 "vite-plugin-purge-icons": "^0.5.2",
107 "vite-plugin-pwa": "^0.3.9", 105 "vite-plugin-pwa": "^0.3.9",
108 "vite-plugin-style-import": "^0.4.6", 106 "vite-plugin-style-import": "^0.4.6",
@@ -118,12 +116,6 @@ @@ -118,12 +116,6 @@
118 "url": "https://github.com/anncwb/vue-vben-admin/issues" 116 "url": "https://github.com/anncwb/vue-vben-admin/issues"
119 }, 117 },
120 "homepage": "https://github.com/anncwb/vue-vben-admin", 118 "homepage": "https://github.com/anncwb/vue-vben-admin",
121 - "changelog": {  
122 - "bugsUrl": "https://github.com/anncwb/vue-vben-admin/issues",  
123 - "emojis": true,  
124 - "authorName": false,  
125 - "authorEmail": false  
126 - },  
127 "husky": { 119 "husky": {
128 "hooks": { 120 "hooks": {
129 "pre-commit": "ls-lint && lint-staged", 121 "pre-commit": "ls-lint && lint-staged",
postcss.config.js
1 module.exports = { 1 module.exports = {
2 plugins: { 2 plugins: {
3 - 'postcss-nested': {},  
4 'postcss-import': {}, 3 'postcss-import': {},
5 autoprefixer: {}, 4 autoprefixer: {},
6 }, 5 },
src/main.ts
@@ -6,11 +6,10 @@ import { setupStore } from '/@/store'; @@ -6,11 +6,10 @@ import { setupStore } from '/@/store';
6 import { setupErrorHandle } from '/@/logics/error-handle'; 6 import { setupErrorHandle } from '/@/logics/error-handle';
7 import { setupGlobDirectives } from '/@/directives'; 7 import { setupGlobDirectives } from '/@/directives';
8 import { setupI18n } from '/@/locales/setupI18n'; 8 import { setupI18n } from '/@/locales/setupI18n';
9 -import { setupProdMockServer } from '../mock/_createProductionServer';  
10 9
11 import { registerGlobComp } from '/@/components/registerGlobComp'; 10 import { registerGlobComp } from '/@/components/registerGlobComp';
12 11
13 -import { isDevMode, isProdMode, isUseMock } from '/@/utils/env'; 12 +import { isDevMode } from '/@/utils/env';
14 13
15 import '/@/design/index.less'; 14 import '/@/design/index.less';
16 15
@@ -42,8 +41,3 @@ if (isDevMode()) { @@ -42,8 +41,3 @@ if (isDevMode()) {
42 app.config.performance = true; 41 app.config.performance = true;
43 window.__APP__ = app; 42 window.__APP__ = app;
44 } 43 }
45 -  
46 -// If you do not need to setting the mock service in the production environment, you can comment the code  
47 -if (isProdMode() && isUseMock()) {  
48 - setupProdMockServer();  
49 -}  
yarn.lock
@@ -3400,10 +3400,10 @@ dateformat@^3.0.0: @@ -3400,10 +3400,10 @@ dateformat@^3.0.0:
3400 resolved "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" 3400 resolved "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
3401 integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== 3401 integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
3402 3402
3403 -dayjs@^1.10.1:  
3404 - version "1.10.2"  
3405 - resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.2.tgz#8f3a424ceb944a8193506804b0045a773d2d0672"  
3406 - integrity sha512-h/YtykNNTR8Qgtd1Fxl5J1/SFP1b7SOk/M1P+Re+bCdFMV0IMkuKNgHPN7rlvvuhfw24w0LX78iYKt4YmePJNQ== 3403 +dayjs@^1.10.3:
  3404 + version "1.10.3"
  3405 + resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.3.tgz#cf3357c8e7f508432826371672ebf376cb7d619b"
  3406 + integrity sha512-/2fdLN987N8Ki7Id8BUN2nhuiRyxTLumQnSQf9CNncFCyqFsSKb9TNhzRYcC8K8eJSJOKvbvkImo/MKKhNi4iw==
3407 3407
3408 de-indent@^1.0.2: 3408 de-indent@^1.0.2:
3409 version "1.0.2" 3409 version "1.0.2"
@@ -6588,13 +6588,6 @@ postcss-modules@^3.2.2: @@ -6588,13 +6588,6 @@ postcss-modules@^3.2.2:
6588 postcss-modules-values "^3.0.0" 6588 postcss-modules-values "^3.0.0"
6589 string-hash "^1.1.1" 6589 string-hash "^1.1.1"
6590 6590
6591 -postcss-nested@^5.0.3:  
6592 - version "5.0.3"  
6593 - resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.3.tgz#2f46d77a06fc98d9c22344fd097396f5431386db"  
6594 - integrity sha512-R2LHPw+u5hFfDgJG748KpGbJyTv7Yr33/2tIMWxquYuHTd9EXu27PYnKi7BxMXLtzKC0a0WVsqHtd7qIluQu/g==  
6595 - dependencies:  
6596 - postcss-selector-parser "^6.0.4"  
6597 -  
6598 postcss-resolve-nested-selector@^0.1.1: 6591 postcss-resolve-nested-selector@^0.1.1:
6599 version "0.1.1" 6592 version "0.1.1"
6600 resolved "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e" 6593 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: @@ -8320,28 +8313,28 @@ vfile@^4.0.0:
8320 unist-util-stringify-position "^2.0.0" 8313 unist-util-stringify-position "^2.0.0"
8321 vfile-message "^2.0.0" 8314 vfile-message "^2.0.0"
8322 8315
8323 -vite-plugin-html@^2.0.0-beta.5:  
8324 - version "2.0.0-beta.5"  
8325 - resolved "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-2.0.0-beta.5.tgz#89bf3a9a2daef30f4c2d133091e85829243a9160"  
8326 - integrity sha512-S3aJ9dqP7hxNYO3LCSnm2OgzsLzPNwgc0pq2ToL5EKDOIcs5+E4Ubb97vKfi3s5UjU/XkhkZBQcbeqMR4f51XQ== 8316 +vite-plugin-html@^2.0.0-beta.6:
  8317 + version "2.0.0-beta.6"
  8318 + resolved "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-2.0.0-beta.6.tgz#468c7f0af73ae32f2018265e3b1314b12466ff20"
  8319 + integrity sha512-oHV+boqFmFs25FgeuyIrNbAtwGvywYwFA+6wHx+YhXP4HzrQv4mXP71we1HM+YRRc3hhKy+HLsiLke6XCgZJ3A==
8327 dependencies: 8320 dependencies:
8328 ejs "^3.1.5" 8321 ejs "^3.1.5"
8329 html-minifier-terser "^5.1.1" 8322 html-minifier-terser "^5.1.1"
8330 8323
8331 -vite-plugin-mock@^2.0.0-beta.3:  
8332 - version "2.0.0-beta.3"  
8333 - resolved "https://registry.npmjs.org/vite-plugin-mock/-/vite-plugin-mock-2.0.0-beta.3.tgz#5276b86734106ccd7aaa299bfb0d16a86c8d2823"  
8334 - integrity sha512-LfgXV3Mzulz89OfuXysxLpnyu66mDiFAeBjwx24N/OiEyZEHagbVRVOJU8Xz/oTmtH7EP/AyrYjQFRb2elQ0BQ== 8324 +vite-plugin-mock@^2.0.0-rc.2:
  8325 + version "2.0.0-rc.2"
  8326 + resolved "https://registry.npmjs.org/vite-plugin-mock/-/vite-plugin-mock-2.0.0-rc.2.tgz#02aacfd90617c4584df54b6c457832ba9b9f90fa"
  8327 + integrity sha512-MfQJc5eGqBmZ8mudT5+Y55wfISBgFebBjrUe4fDAKSFxKTIZ6Dz8KRAQJl82GQRENjoWhcF6kt70azrdZGwM9w==
8335 dependencies: 8328 dependencies:
8336 "@rollup/plugin-node-resolve" "^11.0.1" 8329 "@rollup/plugin-node-resolve" "^11.0.1"
8337 body-parser "^1.19.0" 8330 body-parser "^1.19.0"
8338 chalk "^4.1.0" 8331 chalk "^4.1.0"
8339 chokidar "^3.4.3" 8332 chokidar "^3.4.3"
8340 connect "^3.7.0" 8333 connect "^3.7.0"
8341 - dayjs "^1.10.1" 8334 + dayjs "^1.10.3"
8342 debug "^4.3.1" 8335 debug "^4.3.1"
8343 esbuild "^0.8.29" 8336 esbuild "^0.8.29"
8344 - glob "^7.1.6" 8337 + fast-glob "^3.2.5"
8345 rollup "^2.35.1" 8338 rollup "^2.35.1"
8346 rollup-plugin-esbuild "^2.6.1" 8339 rollup-plugin-esbuild "^2.6.1"
8347 8340