From 43503d597028926c93e4624d999cad4bbccc75fb Mon Sep 17 00:00:00 2001 From: vben Date: Fri, 22 Jan 2021 22:42:27 +0800 Subject: [PATCH] perf(mock): when mock is not used, move mock.js out of the package file --- .env.production | 2 +- CHANGELOG.zh_CN.md | 4 +++ build/vite/plugin/html.ts | 1 + build/vite/plugin/index.ts | 16 +++------ build/vite/plugin/mock.ts | 13 +++++-- .../{style-import.ts => styleImport.ts} | 0 build/vite/plugin/visualizer.ts | 12 +++++++ package.json | 14 ++------ postcss.config.js | 1 - src/main.ts | 8 +---- yarn.lock | 35 ++++++++----------- 11 files changed, 50 insertions(+), 56 deletions(-) rename build/vite/plugin/{style-import.ts => styleImport.ts} (100%) create mode 100644 build/vite/plugin/visualizer.ts diff --git a/.env.production b/.env.production index 860b9948..fdb19f4e 100644 --- a/.env.production +++ b/.env.production @@ -1,5 +1,5 @@ # Whether to open mock -VITE_USE_MOCK = true +VITE_USE_MOCK = false # public path VITE_PUBLIC_PATH = / diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index b67c44b9..3c581a27 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -4,6 +4,10 @@ - `ApiSelect`新增 `numberToString`属性,用于将 value 为`number`的值全部转化为`string` +### ⚡ Performance Improvements + +当不使用 mock 时,将 `mock.js` 移出打包文件 + ### 🐛 Bug Fixes - 修复 modal 高度计算错误 diff --git a/build/vite/plugin/html.ts b/build/vite/plugin/html.ts index 66aaf2fd..bd10c3a1 100644 --- a/build/vite/plugin/html.ts +++ b/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: { diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index e09ac1cf..2af23902 100644 --- a/build/vite/plugin/index.ts +++ b/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; } diff --git a/build/vite/plugin/mock.ts b/build/vite/plugin/mock.ts index c0f54e55..c93f4433 100644 --- a/build/vite/plugin/mock.ts +++ b/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; } diff --git a/build/vite/plugin/style-import.ts b/build/vite/plugin/styleImport.ts similarity index 100% rename from build/vite/plugin/style-import.ts rename to build/vite/plugin/styleImport.ts diff --git a/build/vite/plugin/visualizer.ts b/build/vite/plugin/visualizer.ts new file mode 100644 index 00000000..52a3a536 --- /dev/null +++ b/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 []; +} diff --git a/package.json b/package.json index 64b053c4..73aad02e 100644 --- a/package.json +++ b/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", diff --git a/postcss.config.js b/postcss.config.js index f3017877..1284396f 100755 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,5 @@ module.exports = { plugins: { - 'postcss-nested': {}, 'postcss-import': {}, autoprefixer: {}, }, diff --git a/src/main.ts b/src/main.ts index d86c6cdd..9404c9ea 100644 --- a/src/main.ts +++ b/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(); -} diff --git a/yarn.lock b/yarn.lock index 71d82741..1b0f072f 100644 --- a/yarn.lock +++ b/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" -- GitLab