From 491f1fcfff17f2297e3fee00e1542778aed08e56 Mon Sep 17 00:00:00 2001 From: Vben Date: Sun, 7 Mar 2021 20:21:31 +0800 Subject: [PATCH] perf: optimize local loading speed close #329 --- CHANGELOG.zh_CN.md | 1 + build/vite/plugin/index.ts | 2 +- build/vite/plugin/styleImport.ts | 3 +- package.json | 18 ++--- src/main.ts | 9 +++ vite.config.ts | 1 - yarn.lock | 122 +++++++++++++++++++------------ 7 files changed, 97 insertions(+), 59 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 40e1f7fc..09da9430 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -11,6 +11,7 @@ - 登录页监听回车事件进行登录 - 当表格设置自适应大小时,根据屏幕来铺满了高度. - Tree 滚动条优化 +- 优化本地开发加载速度 ### 🐛 Bug Fixes diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 021c8227..cf0ce0d6 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -47,7 +47,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { vitePlugins.push(PurgeIcons()); // vite-plugin-style-import - vitePlugins.push(configStyleImportPlugin()); + vitePlugins.push(configStyleImportPlugin(isBuild)); // rollup-plugin-visualizer vitePlugins.push(configVisualizerConfig()); diff --git a/build/vite/plugin/styleImport.ts b/build/vite/plugin/styleImport.ts index c6560934..d1160f38 100644 --- a/build/vite/plugin/styleImport.ts +++ b/build/vite/plugin/styleImport.ts @@ -5,7 +5,8 @@ import styleImport from 'vite-plugin-style-import'; -export function configStyleImportPlugin() { +export function configStyleImportPlugin(isBuild: boolean) { + if (!isBuild) return []; const pwaPlugin = styleImport({ libs: [ { diff --git a/package.json b/package.json index 6ea32934..bd215b84 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "version": "2.0.2", "scripts": { "bootstrap": "yarn install", - "serve": "vite", - "dev": "vite", + "serve": "npx --max_old_space_size=4096 vite", + "dev": "npx --max_old_space_size=4096 vite", "build": "vite build && esno ./build/script/postBuild.ts", "build:no-cache": "yarn clean:cache && npm run build", "report": "cross-env REPORT=true npm run build ", @@ -64,7 +64,7 @@ "@types/mockjs": "^1.0.3", "@types/nprogress": "^0.2.0", "@types/qrcode": "^1.4.0", - "@types/qs": "^6.9.5", + "@types/qs": "^6.9.6", "@types/rollup-plugin-visualizer": "^2.6.0", "@types/sortablejs": "^1.10.6", "@types/yargs": "^16.0.0", @@ -74,7 +74,7 @@ "@vitejs/plugin-vue": "^1.1.5", "@vitejs/plugin-vue-jsx": "^1.1.2", "@vue/compiler-sfc": "^3.0.7", - "autoprefixer": "^10.2.4", + "autoprefixer": "^10.2.5", "commitizen": "^4.2.3", "conventional-changelog-cli": "^2.1.1", "cross-env": "^7.0.3", @@ -96,9 +96,9 @@ "pretty-quick": "^3.1.0", "rimraf": "^3.0.2", "rollup-plugin-visualizer": "^4.2.0", - "stylelint": "^13.11.0", + "stylelint": "^13.12.0", "stylelint-config-prettier": "^8.0.2", - "stylelint-config-standard": "^20.0.0", + "stylelint-config-standard": "^21.0.0", "stylelint-order": "^4.1.0", "ts-node": "^9.1.1", "typescript": "4.2.3", @@ -110,9 +110,9 @@ "vite-plugin-purge-icons": "^0.7.0", "vite-plugin-pwa": "^0.5.6", "vite-plugin-style-import": "^0.8.1", - "vite-plugin-svg-icons": "^0.2.1", + "vite-plugin-svg-icons": "^0.3.3", "vite-plugin-theme": "^0.4.8", - "vite-plugin-windicss": "0.6.10", + "vite-plugin-windicss": "0.6.11", "vue-eslint-parser": "^7.6.0", "yargs": "^16.2.0" }, @@ -132,6 +132,6 @@ }, "homepage": "https://github.com/anncwb/vue-vben-admin", "engines": { - "node": "^12 || ^14 || ^15 || ^16" + "node": "^12 || >=14" } } diff --git a/src/main.ts b/src/main.ts index a03f2c60..629326ae 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,14 @@ import '/@/design/index.less'; import 'windi.css'; +// Do not introduce on-demand in local development? +// In the local development for on-demand introduction, the number of browser requests will increase by about 20%. +// Which may slow down the browser refresh. +// Therefore, all local development is introduced, and the production environment is introduced on demand +if (import.meta.env.DEV) { + import('ant-design-vue/dist/antd.less'); +} + import { createApp } from 'vue'; import App from './App.vue'; @@ -12,6 +20,7 @@ import { setupI18n } from '/@/locales/setupI18n'; import { registerGlobComp } from '/@/components/registerGlobComp'; +// Register icon Sprite import 'vite-plugin-svg-icons/register'; import { isDevMode } from '/@/utils/env'; diff --git a/vite.config.ts b/vite.config.ts index c05e9dbf..6f5fade9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -52,7 +52,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { }, build: { - cssCodeSplit: false, // minify: 'esbuild', outDir: OUTPUT_DIR, polyfillDynamicImport: VITE_LEGACY, diff --git a/yarn.lock b/yarn.lock index 58d061e5..454bfb3e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1463,10 +1463,10 @@ dependencies: "@types/node" "*" -"@types/qs@^6.9.5": - version "6.9.5" - resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz#434711bdd49eb5ee69d90c1d67c354a9a8ecb18b" - integrity sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ== +"@types/qs@^6.9.6": + version "6.9.6" + resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.6.tgz#df9c3c8b31a247ec315e6996566be3171df4b3b1" + integrity sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA== "@types/resolve@1.17.1": version "1.17.1" @@ -1785,10 +1785,10 @@ dependencies: vue-demi latest -"@windicss/plugin-utils@0.6.10": - version "0.6.10" - resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.6.10.tgz#39a7f5df9f515eae556ef610a8ae21be9b07ef0c" - integrity sha512-dMPHtUHmOktnikLah8tmMQjU2gb5AGxuXO8wen3lMo/G8YZI1H9Ua9qnMUIbaJ11mlGhpv89iYEsyfRHThbi/w== +"@windicss/plugin-utils@0.6.11": + version "0.6.11" + resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.6.11.tgz#9d2a2f5ba3170700ad4b223435b8796cff934167" + integrity sha512-UBPe1yb4ZzGjISjbHV+e9/sj3+bvK2Bb+Mcn18qSW4mUfPnTY+tXBV7yvoaYILgZat9BOppHrRk9dwrI2DJD3w== dependencies: esbuild "^0.8.56" esbuild-register "^2.2.0" @@ -2075,14 +2075,14 @@ atob@^2.1.2: resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== -autoprefixer@^10.2.4: - version "10.2.4" - resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.4.tgz#c0e7cf24fcc6a1ae5d6250c623f0cb8beef2f7e1" - integrity sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw== +autoprefixer@^10.2.5: + version "10.2.5" + resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.5.tgz#096a0337dbc96c0873526d7fef5de4428d05382d" + integrity sha512-7H4AJZXvSsn62SqZyJCP+1AWwOuoYpUfK6ot9vm0e87XD6mT8lDywc9D9OTJPMULyGcvmIxzTAMeG2Cc+YX+fA== dependencies: - browserslist "^4.16.1" - caniuse-lite "^1.0.30001181" - colorette "^1.2.1" + browserslist "^4.16.3" + caniuse-lite "^1.0.30001196" + colorette "^1.2.2" fraction.js "^4.0.13" normalize-range "^0.1.2" postcss-value-parser "^4.1.0" @@ -2271,6 +2271,17 @@ browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.1: escalade "^3.1.1" node-releases "^1.1.69" +browserslist@^4.16.3: + version "4.16.3" + resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717" + integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw== + dependencies: + caniuse-lite "^1.0.30001181" + colorette "^1.2.1" + electron-to-chromium "^1.3.649" + escalade "^3.1.1" + node-releases "^1.1.70" + buffer-alloc-unsafe@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0" @@ -2408,6 +2419,11 @@ caniuse-lite@^1.0.30001181: resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz#4f0e5184e1ea7c3bf2727e735cbe7ca9a451d673" integrity sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ== +caniuse-lite@^1.0.30001196: + version "1.0.30001196" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001196.tgz#00518a2044b1abf3e0df31fadbe5ed90b63f4e64" + integrity sha512-CPvObjD3ovWrNBaXlAIGWmg2gQQuJ5YhuciUOjPRox6hIQttu8O+b51dx6VIpIY9ESd2d0Vac1RKpICdG4rGUg== + capital-case@^1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669" @@ -3562,6 +3578,11 @@ electron-to-chromium@^1.3.634: resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.644.tgz#c89721733ec26b8d117275fb6b2acbeb3d45a6b6" integrity sha512-N7FLvjDPADxad+OXXBuYfcvDvCBG0aW8ZZGr7G91sZMviYbnQJFxdSvUus4SJ0K7Q8dzMxE+Wx1d/CrJIIJ0sw== +electron-to-chromium@^1.3.649: + version "1.3.682" + resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.682.tgz#f4b5c8d4479df96b61e508a721d6c32c1262ef23" + integrity sha512-zok2y37qR00U14uM6qBz/3iIjWHom2eRfC2S1StA0RslP7x34jX+j4mxv80t8OEOHLJPVG54ZPeaFxEI7gPrwg== + emoji-regex@^7.0.1: version "7.0.3" resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" @@ -4100,13 +4121,6 @@ figures@^3.0.0, figures@^3.2.0: dependencies: escape-string-regexp "^1.0.5" -file-entry-cache@^6.0.0: - version "6.0.0" - resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.0.tgz#7921a89c391c6d93efec2169ac6bf300c527ea0a" - integrity sha512-fqoO76jZ3ZnYrXLDRxBR1YvOvc0k844kcOg40bgsPrE25LAb/PDqTY+ho64Xh2c8ZXgIKldchCFHczG2UVRcWA== - dependencies: - flat-cache "^3.0.4" - file-entry-cache@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027" @@ -6353,6 +6367,11 @@ node-releases@^1.1.69: resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08" integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw== +node-releases@^1.1.70: + version "1.1.71" + resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb" + integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg== + normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0: version "2.5.0" resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" @@ -8128,6 +8147,15 @@ string-width@^4.1.0, string-width@^4.2.0: is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.0" +string-width@^4.2.2: + version "4.2.2" + resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5" + integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.0" + string.prototype.trimend@^1.0.1, string.prototype.trimend@^1.0.3: version "1.0.3" resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz#a22bd53cca5c7cf44d7c9d5c732118873d6cd18b" @@ -8275,17 +8303,17 @@ stylelint-config-prettier@^8.0.2: resolved "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.2.tgz#da9de33da4c56893cbe7e26df239a7374045e14e" integrity sha512-TN1l93iVTXpF9NJstlvP7nOu9zY2k+mN0NSFQ/VEGz15ZIP9ohdDZTtCWHs5LjctAhSAzaILULGbgiM0ItId3A== -stylelint-config-recommended@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657" - integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ== +stylelint-config-recommended@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-4.0.0.tgz#665a0034065e6704d5032ba51bf4efa37d328ef9" + integrity sha512-sgna89Ng+25Hr9kmmaIxpGWt2LStVm1xf1807PdcWasiPDaOTkOHRL61sINw0twky7QMzafCGToGDnHT/kTHtQ== -stylelint-config-standard@^20.0.0: - version "20.0.0" - resolved "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-20.0.0.tgz#06135090c9e064befee3d594289f50e295b5e20d" - integrity sha512-IB2iFdzOTA/zS4jSVav6z+wGtin08qfj+YyExHB3LF9lnouQht//YyB0KZq9gGz5HNPkddHOzcY8HsUey6ZUlA== +stylelint-config-standard@^21.0.0: + version "21.0.0" + resolved "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-21.0.0.tgz#4942cfa27301eb6702fa8fc46a44da35d1a5cfd7" + integrity sha512-Yf6mx5oYEbQQJxWuW7X3t1gcxqbUx52qC9SMS3saC2ruOVYEyqmr5zSW6k3wXflDjjFrPhar3kp68ugRopmlzg== dependencies: - stylelint-config-recommended "^3.0.0" + stylelint-config-recommended "^4.0.0" stylelint-order@^4.1.0: version "4.1.0" @@ -8296,10 +8324,10 @@ stylelint-order@^4.1.0: postcss "^7.0.31" postcss-sorting "^5.0.1" -stylelint@^13.11.0: - version "13.11.0" - resolved "https://registry.npmjs.org/stylelint/-/stylelint-13.11.0.tgz#591981fbdd68c9d3d3e6147a0cd6a07539fc216d" - integrity sha512-DhrKSWDWGZkCiQMtU+VroXM6LWJVC8hSK24nrUngTSQvXGK75yZUq4yNpynqrxD3a/fzKMED09V+XxO4z4lTbw== +stylelint@^13.12.0: + version "13.12.0" + resolved "https://registry.npmjs.org/stylelint/-/stylelint-13.12.0.tgz#cceb922be0d0c7b7b6926271eea2b90cb924733e" + integrity sha512-P8O1xDy41B7O7iXaSlW+UuFbE5+ZWQDb61ndGDxKIt36fMH50DtlQTbwLpFLf8DikceTAb3r6nPrRv30wBlzXw== dependencies: "@stylelint/postcss-css-in-js" "^0.37.2" "@stylelint/postcss-markdown" "^0.36.2" @@ -8311,7 +8339,7 @@ stylelint@^13.11.0: execall "^2.0.0" fast-glob "^3.2.5" fastest-levenshtein "^1.0.12" - file-entry-cache "^6.0.0" + file-entry-cache "^6.0.1" get-stdin "^8.0.0" global-modules "^2.0.0" globby "^11.0.2" @@ -8321,7 +8349,7 @@ stylelint@^13.11.0: import-lazy "^4.0.0" imurmurhash "^0.1.4" known-css-properties "^0.21.0" - lodash "^4.17.20" + lodash "^4.17.21" log-symbols "^4.0.0" mathml-tag-names "^2.1.3" meow "^9.0.0" @@ -8341,7 +8369,7 @@ stylelint@^13.11.0: resolve-from "^5.0.0" slash "^3.0.0" specificity "^0.4.1" - string-width "^4.2.0" + string-width "^4.2.2" strip-ansi "^6.0.0" style-search "^0.1.0" sugarss "^2.0.0" @@ -9131,10 +9159,10 @@ vite-plugin-style-import@^0.8.1: es-module-lexer "^0.4.1" magic-string "^0.25.7" -vite-plugin-svg-icons@^0.2.1: - version "0.2.1" - resolved "https://registry.npmjs.org/vite-plugin-svg-icons/-/vite-plugin-svg-icons-0.2.1.tgz#85a456ac30e8c67ab781a175d59daf36ef115ffd" - integrity sha512-LgbBfKIsUPyPMXeBY/gEsr8l44ooDL5jbqGf8YjouMGTGfE4K2xXdO/5azyJZBkvvfPZBCCrAcGucMG08dAE/A== +vite-plugin-svg-icons@^0.3.3: + version "0.3.3" + resolved "https://registry.npmjs.org/vite-plugin-svg-icons/-/vite-plugin-svg-icons-0.3.3.tgz#b699e1af244500d893cc32b48a772492c1fae72b" + integrity sha512-ZI3FLspeM3PV0OE503m7/11jW5aSSCwxXUEcJZL3RwSYmpkLE0cSsM7UFZf0tx3cRoSB/JpeOlRIRH6G2BhWiQ== dependencies: debug "^4.3.2" etag "^1.8.1" @@ -9154,12 +9182,12 @@ vite-plugin-theme@^0.4.8: es-module-lexer "^0.3.26" tinycolor2 "^1.4.2" -vite-plugin-windicss@0.6.10: - version "0.6.10" - resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.6.10.tgz#b2719bc9f29220208162e04c342a8983f7536fdb" - integrity sha512-ofeJGvHu/Tz+HIP9Ap0uQHBt5YNi2uv/4yoJH30I3zFE5gAdsKN3GgzrcySQEPaQIgWmcDNbpWqAFejLHFLpzw== +vite-plugin-windicss@0.6.11: + version "0.6.11" + resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.6.11.tgz#62156e30d9ae1dd9d0a1664686c263ef36092f27" + integrity sha512-cFHyEVyCHGZ5Bu7L3EmiMKVsYtsI23+YBEd/bggEbdhdbv93bBk0M3j8ZVwZxwvKgJhLVG9Fthl3jAE+FVl0EA== dependencies: - "@windicss/plugin-utils" "0.6.10" + "@windicss/plugin-utils" "0.6.11" windicss "^2.2.6" vite@^2.0.5: