【性能大优化】首屏缩短至10秒多&打包时间缩短至一半,升级vite4和vue3.3

pull/755/head
zhangdaiscott 2023-08-28 17:27:11 +08:00
parent b6c01210f0
commit c588bef364
8 changed files with 14075 additions and 9656 deletions

View File

@ -1,5 +1,5 @@
/** /**
* Zero-config PWA for Vite * vite-plugin-pwavitevitepwa
* https://github.com/antfu/vite-plugin-pwa * https://github.com/antfu/vite-plugin-pwa
*/ */
import { VitePWA } from 'vite-plugin-pwa'; import { VitePWA } from 'vite-plugin-pwa';

View File

@ -23,151 +23,148 @@
"dependencies": { "dependencies": {
"@jeecg/online": "3.5.3-beta3", "@jeecg/online": "3.5.3-beta3",
"@qiaoqiaoyun/drag-free": "^1.1.3", "@qiaoqiaoyun/drag-free": "^1.1.3",
"@iconify/iconify": "^2.2.1", "@iconify/iconify": "^3.1.1",
"@ant-design/colors": "^6.0.0", "@ant-design/colors": "^7.0.0",
"@ant-design/icons-vue": "^6.1.0", "@ant-design/icons-vue": "^6.1.0",
"@logicflow/core": "^1.1.13", "@logicflow/core": "^1.2.10",
"@logicflow/extension": "^1.1.13", "@logicflow/extension": "^1.2.10",
"@vue/shared": "^3.2.33", "@vue/shared": "^3.3.4",
"@vue/runtime-core": "^3.2.33", "@vue/runtime-core": "^3.3.4",
"@vueuse/shared": "^8.3.0", "@vueuse/shared": "^10.2.1",
"@vueuse/core": "^8.3.0", "@vueuse/core": "^10.2.1",
"@zxcvbn-ts/core": "^2.0.1", "@zxcvbn-ts/core": "^3.0.3",
"ant-design-vue": "^3.2.20", "ant-design-vue": "^3.2.20",
"axios": "^0.26.1", "axios": "^1.4.0",
"china-area-data": "^5.0.1", "china-area-data": "^5.0.1",
"clipboard": "^2.0.8", "clipboard": "^2.0.11",
"codemirror": "^5.65.3", "codemirror": "^5.65.3",
"cron-parser": "^3.5.0", "cron-parser": "^4.8.1",
"cropperjs": "^1.5.12", "cropperjs": "^1.5.13",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"dayjs": "^1.11.1", "dayjs": "^1.11.9",
"dom-align": "^1.12.2", "dom-align": "^1.12.4",
"echarts": "^5.3.2", "echarts": "^5.4.3",
"emoji-mart-vue-fast": "^11.1.1", "emoji-mart-vue-fast": "^15.0.0",
"enquire.js": "^2.1.6", "enquire.js": "^2.1.6",
"intro.js": "^5.1.0", "intro.js": "^7.0.1",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
"md5": "^2.3.0", "md5": "^2.3.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"path-to-regexp": "^6.2.0", "path-to-regexp": "^6.2.1",
"pinia": "2.0.12", "pinia": "2.1.4",
"print-js": "^1.6.0", "print-js": "^1.6.0",
"pinyin-pro": "^3.11.0", "qs": "^6.11.2",
"qs": "^6.10.3", "qrcode": "^1.5.3",
"qrcode": "^1.5.0",
"qrcodejs2": "0.0.2", "qrcodejs2": "0.0.2",
"resize-observer-polyfill": "^1.5.1", "resize-observer-polyfill": "^1.5.1",
"showdown": "^2.1.0", "showdown": "^2.1.0",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.0",
"tinymce": "^5.10.3", "tinymce": "^5.10.3",
"vditor": "^3.8.13", "vditor": "^3.9.4",
"vue": "^3.2.47", "vue": "^3.3.4",
"vue-cropper": "^0.5.6", "vue-cropper": "^0.6.2",
"vue-cropperjs": "^5.0.0", "vue-cropperjs": "^5.0.0",
"vue-i18n": "^9.1.9", "vue-i18n": "^9.2.2",
"vue-infinite-scroll": "^2.0.2", "vue-infinite-scroll": "^2.0.2",
"vue-print-nb-jeecg": "^1.0.12", "vue-print-nb-jeecg": "^1.0.12",
"vue-router": "^4.0.14", "vue-router": "^4.2.4",
"vue-types": "^4.1.1", "vue-types": "^5.1.0",
"vuedraggable": "^4.1.0", "vuedraggable": "^4.1.0",
"vxe-table": "4.1.0", "vxe-table": "4.1.0",
"vxe-table-plugin-antd": "3.0.5", "vxe-table-plugin-antd": "3.0.5",
"xe-utils": "^3.3.1", "xe-utils": "^3.3.1",
"vue-json-pretty": "^2.0.6", "vue-json-pretty": "^2.2.4",
"xss": "^1.0.13" "xss": "^1.0.14"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^16.2.3", "@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^16.2.1", "@commitlint/config-conventional": "^17.6.6",
"@iconify/json": "^2.1.30", "@iconify/json": "^2.2.91",
"@purge-icons/generated": "^0.8.1", "@purge-icons/generated": "^0.9.0",
"@types/codemirror": "^5.60.5", "@types/codemirror": "^5.60.8",
"@types/crypto-js": "^4.1.1", "@types/crypto-js": "^4.1.1",
"@types/fs-extra": "^9.0.13", "@types/fs-extra": "^11.0.1",
"@types/inquirer": "^8.2.1", "@types/inquirer": "^9.0.3",
"@types/intro.js": "^3.0.2", "@types/intro.js": "^5.1.1",
"@types/jest": "^27.0.2", "@types/jest": "^29.5.3",
"@types/lodash-es": "^4.17.6", "@types/lodash-es": "^4.17.8",
"@types/mockjs": "^1.0.6", "@types/mockjs": "^1.0.7",
"@types/node": "^17.0.25", "@types/node": "^20.4.2",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.2", "@types/qrcode": "^1.5.1",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@types/pinyin": "^2.10.0", "@types/pinyin": "^2.10.0",
"@types/showdown": "^1.9.4", "@types/showdown": "^2.0.1",
"@types/sortablejs": "^1.10.7", "@types/sortablejs": "^1.15.1",
"@typescript-eslint/eslint-plugin": "^5.20.0", "@typescript-eslint/eslint-plugin": "^6.1.0",
"@typescript-eslint/parser": "^5.20.0", "@typescript-eslint/parser": "^6.1.0",
"@vitejs/plugin-legacy": "^2.0.0", "@vitejs/plugin-legacy": "^4.1.0",
"@vitejs/plugin-vue": "^3.0.1", "@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^1.3.10", "@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/compiler-sfc": "^3.2.33", "@vue/compiler-sfc": "^3.3.4",
"@vue/test-utils": "^2.0.0-rc.21", "@vue/test-utils": "^2.4.0",
"autoprefixer": "^10.4.4", "autoprefixer": "^10.4.14",
"commitizen": "^4.2.4", "commitizen": "^4.3.0",
"conventional-changelog-cli": "^2.2.2", "conventional-changelog-cli": "^3.0.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cz-git": "^1.3.9", "cz-git": "^1.7.0",
"czg": "^1.3.9", "czg": "^1.7.0",
"dotenv": "^16.0.0", "dotenv": "^16.3.1",
"eslint": "^8.22.0", "eslint": "^8.45.0",
"eslint-config-prettier": "^8.6.0", "eslint-config-prettier": "^8.8.0",
"eslint-define-config": "^1.14.0", "eslint-define-config": "^1.21.0",
"eslint-plugin-jest": "^27.2.1", "eslint-plugin-jest": "^27.2.3",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.9.0", "eslint-plugin-vue": "^9.15.1",
"esno": "^0.14.1", "esno": "^0.17.0",
"fs-extra": "^10.1.0", "fs-extra": "^11.1.1",
"http-server": "^14.0.0", "http-server": "^14.1.1",
"husky": "^7.0.4", "husky": "^8.0.3",
"inquirer": "^8.2.2", "inquirer": "^9.2.8",
"is-ci": "^3.0.0", "is-ci": "^3.0.1",
"jest": "^27.3.1", "jest": "^29.6.1",
"less": "^4.1.2", "less": "^4.1.3",
"lint-staged": "12.3.7", "lint-staged": "13.2.3",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"postcss": "^8.4.12", "postcss": "^8.4.26",
"postcss-html": "^1.4.1", "postcss-html": "^1.5.0",
"postcss-less": "^6.0.0", "postcss-less": "^6.0.0",
"prettier": "^2.6.2", "prettier": "^3.0.0",
"pretty-quick": "^3.1.1", "pretty-quick": "^3.1.3",
"rimraf": "^3.0.2", "rimraf": "^5.0.1",
"rollup": "^2.70.2", "rollup": "^3.26.3",
"rollup-plugin-visualizer": "^5.9.2", "rollup-plugin-visualizer": "^5.9.2",
"stylelint": "^14.7.1", "stylelint": "^15.10.1",
"stylelint-config-prettier": "^9.0.3", "stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended": "^7.0.0", "stylelint-config-recommended": "^13.0.0",
"stylelint-config-recommended-vue": "^1.4.0", "stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard": "^25.0.0", "stylelint-config-standard": "^34.0.0",
"stylelint-order": "^5.0.0", "stylelint-order": "^6.0.3",
"ts-jest": "^27.0.7", "ts-jest": "^29.1.1",
"ts-node": "^10.7.0", "ts-node": "^10.9.1",
"typescript": "^4.6.3", "typescript": "^5.1.6",
"vite": "^3.2.3", "vite": "^4.4.4",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0", "vite-plugin-html": "^3.2.0",
"vite-plugin-imagemin": "^0.6.1", "vite-plugin-imagemin": "^0.6.1",
"vite-plugin-mkcert": "^1.10.1", "vite-plugin-mkcert": "^1.16.0",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-optimize-persist": "^0.1.2", "vite-plugin-purge-icons": "^0.9.2",
"vite-plugin-package-config": "^0.1.1", "vite-plugin-pwa": "^0.16.4",
"vite-plugin-purge-icons": "^0.8.2",
"vite-plugin-pwa": "^0.12.3",
"vite-plugin-style-import": "^2.0.0", "vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"@rys-fe/vite-plugin-theme": "^0.8.6", "@rys-fe/vite-plugin-theme": "^0.8.6",
"vite-plugin-vue-setup-extend-plus": "^0.1.0", "vite-plugin-vue-setup-extend-plus": "^0.1.0",
"unocss": "^0.55.3", "unocss": "^0.55.3",
"vue-eslint-parser": "^8.3.0", "vue-eslint-parser": "^9.3.1",
"vue-tsc": "^0.33.9" "vue-tsc": "^1.8.5"
}, },
"resolutions": { "resolutions": {
"bin-wrapper": "npm:bin-wrapper-china", "bin-wrapper": "npm:bin-wrapper-china",
"rollup": "^2.72.0" "rollup": "^3.26.3"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -180,112 +177,5 @@
"homepage": "https://github.com/jeecgboot/jeecgboot-vue3", "homepage": "https://github.com/jeecgboot/jeecgboot-vue3",
"engines": { "engines": {
"node": "^12 || >=14" "node": "^12 || >=14"
},
"vite": {
"optimizeDeps": {
"include": [
"@ant-design/colors",
"@ant-design/icons-vue",
"@vueuse/core",
"@vueuse/shared",
"@zxcvbn-ts/core",
"ant-design-vue",
"axios",
"china-area-data",
"clipboard",
"codemirror",
"codemirror/addon/fold/brace-fold.js",
"codemirror/addon/fold/comment-fold.js",
"codemirror/addon/fold/foldcode.js",
"codemirror/addon/fold/foldgutter.js",
"codemirror/addon/fold/indent-fold.js",
"codemirror/addon/hint/anyword-hint.js",
"codemirror/addon/hint/show-hint.js",
"codemirror/addon/selection/active-line.js",
"codemirror/mode/clike/clike.js",
"codemirror/mode/css/css.js",
"codemirror/mode/javascript/javascript.js",
"codemirror/mode/markdown/markdown.js",
"codemirror/mode/python/python.js",
"codemirror/mode/r/r.js",
"codemirror/mode/shell/shell.js",
"codemirror/mode/sql/sql.js",
"codemirror/mode/swift/swift.js",
"codemirror/mode/vue/vue.js",
"codemirror/mode/xml/xml.js",
"cron-parser",
"cropperjs",
"crypto-js/aes",
"crypto-js/enc-base64",
"crypto-js/enc-utf8",
"crypto-js/md5",
"crypto-js/mode-ecb",
"crypto-js/pad-pkcs7",
"dom-align",
"echarts",
"echarts/charts",
"echarts/components",
"echarts/core",
"echarts/renderers",
"emoji-mart-vue-fast/src",
"intro.js",
"lodash-es",
"md5",
"nprogress",
"path-to-regexp",
"pinia",
"print-js",
"qrcode",
"qs",
"resize-observer-polyfill",
"showdown",
"sortablejs",
"tinymce/icons/default/icons",
"tinymce/plugins/advlist",
"tinymce/plugins/anchor",
"tinymce/plugins/autolink",
"tinymce/plugins/autosave",
"tinymce/plugins/code",
"tinymce/plugins/codesample",
"tinymce/plugins/contextmenu",
"tinymce/plugins/directionality",
"tinymce/plugins/fullscreen",
"tinymce/plugins/hr",
"tinymce/plugins/image",
"tinymce/plugins/insertdatetime",
"tinymce/plugins/link",
"tinymce/plugins/lists",
"tinymce/plugins/media",
"tinymce/plugins/nonbreaking",
"tinymce/plugins/noneditable",
"tinymce/plugins/pagebreak",
"tinymce/plugins/paste",
"tinymce/plugins/preview",
"tinymce/plugins/print",
"tinymce/plugins/save",
"tinymce/plugins/searchreplace",
"tinymce/plugins/spellchecker",
"tinymce/plugins/tabfocus",
"tinymce/plugins/table",
"tinymce/plugins/template",
"tinymce/plugins/textcolor",
"tinymce/plugins/textpattern",
"tinymce/plugins/visualblocks",
"tinymce/plugins/visualchars",
"tinymce/plugins/wordcount",
"tinymce/themes/silver",
"tinymce/tinymce",
"vditor",
"vue",
"vue-i18n",
"vue-print-nb-jeecg/src/printarea",
"vue-router",
"vue-types",
"vxe-table",
"vxe-table-plugin-antd",
"xe-utils",
"xss"
]
}
} }
} }

File diff suppressed because it is too large Load Diff

View File

@ -282,7 +282,7 @@
white-space: nowrap; white-space: nowrap;
} }
} }
:deep .jeecg-basic-table .ant-table-wrapper .ant-table-title { :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title) {
min-height: 0; min-height: 0;
} }
</style> </style>

View File

@ -243,7 +243,7 @@
} }
} }
:deep .jeecg-basic-table .ant-table-wrapper .ant-table-title { :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title){
min-height: 0; min-height: 0;
} }
</style> </style>

View File

@ -1,5 +1,5 @@
import { CSSProperties, VNodeChild } from 'vue'; import { CSSProperties, VNodeChild } from 'vue';
import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types'; import { createTypes, VueTypeValidableDef, VueTypesInterface, toValidableType } from 'vue-types';
export type VueNode = VNodeChild | JSX.Element; export type VueNode = VNodeChild | JSX.Element;
@ -8,8 +8,7 @@ type PropTypes = VueTypesInterface & {
readonly VNodeChild: VueTypeValidableDef<VueNode>; readonly VNodeChild: VueTypeValidableDef<VueNode>;
// readonly trueBool: VueTypeValidableDef<boolean>; // readonly trueBool: VueTypeValidableDef<boolean>;
}; };
const newPropTypes = createTypes({
const propTypes = createTypes({
func: undefined, func: undefined,
bool: undefined, bool: undefined,
string: undefined, string: undefined,
@ -18,17 +17,19 @@ const propTypes = createTypes({
integer: undefined, integer: undefined,
}) as PropTypes; }) as PropTypes;
propTypes.extend([ // 从 vue-types v5.0 开始extend()方法已经废弃当前已改为官方推荐的ES6+方法 https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#the-extend-method
{ class propTypes extends newPropTypes {
name: 'style', // a native-like validator that supports the `.validable` method
getter: true, static get style() {
type: [String, Object], return toValidableType('style', {
default: undefined, type: [String, Object],
}, });
{ }
name: 'VNodeChild',
getter: true, static get VNodeChild() {
type: undefined, return toValidableType('VNodeChild', {
}, type: undefined,
]); });
}
}
export { propTypes }; export { propTypes };

View File

@ -23,7 +23,9 @@
"skipLibCheck": true, "skipLibCheck": true,
"paths": { "paths": {
"/@/*": ["src/*"], "/@/*": ["src/*"],
"/#/*": ["types/*"] "/#/*": ["types/*"],
"@/*": ["src/*"],
"#/*": ["types/*"]
} }
}, },
"include": [ "include": [

View File

@ -50,6 +50,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
find: /\/#\//, find: /\/#\//,
replacement: pathResolve('types') + '/', replacement: pathResolve('types') + '/',
}, },
{
find: /@\//,
replacement: pathResolve('src') + '/',
},
// /#/xxxx => types/xxxx
{
find: /#\//,
replacement: pathResolve('types') + '/',
},
], ],
}, },
server: { server: {
@ -84,7 +93,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// vue vue-router合并打包 // vue vue-router合并打包
vue: ['vue', 'vue-router'], vue: ['vue', 'vue-router'],
}, },
} },
}, },
// 关闭brotliSize显示可以稍微减少打包时间 // 关闭brotliSize显示可以稍微减少打包时间
reportCompressedSize: false, reportCompressedSize: false,
@ -112,18 +121,123 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// The vite plugin used by the project. The quantity is large, so it is separately extracted and managed // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
plugins: createVitePlugins(viteEnv, isBuild), plugins: createVitePlugins(viteEnv, isBuild),
// 预加载构建配置(首屏性能)
optimizeDeps: { optimizeDeps: {
esbuildOptions: { esbuildOptions: {
target: 'es2020', target: 'es2020',
}, },
// @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly exclude: [
//升级vite4后需要排除online依赖
'@jeecg/online',
],
// 提前预加载依赖,缩短首屏访问时间
include: [ include: [
'@vue/runtime-core', '@vue/runtime-core',
'@vue/shared', '@vue/shared',
'@iconify/iconify', '@iconify/iconify',
'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/zh_CN',
'ant-design-vue/es/locale/en_US', 'ant-design-vue/es/locale/en_US',
'@ant-design/colors',
'@ant-design/icons-vue',
'@vueuse/core',
'@vueuse/shared',
'@zxcvbn-ts/core',
'ant-design-vue',
'axios',
'china-area-data',
'clipboard',
'codemirror',
'codemirror/addon/fold/brace-fold.js',
'codemirror/addon/fold/comment-fold.js',
'codemirror/addon/fold/foldcode.js',
'codemirror/addon/fold/foldgutter.js',
'codemirror/addon/fold/indent-fold.js',
'codemirror/addon/hint/anyword-hint.js',
'codemirror/addon/hint/show-hint.js',
'codemirror/addon/selection/active-line.js',
'codemirror/mode/clike/clike.js',
'codemirror/mode/css/css.js',
'codemirror/mode/javascript/javascript.js',
'codemirror/mode/markdown/markdown.js',
'codemirror/mode/python/python.js',
'codemirror/mode/r/r.js',
'codemirror/mode/shell/shell.js',
'codemirror/mode/sql/sql.js',
'codemirror/mode/swift/swift.js',
'codemirror/mode/vue/vue.js',
'codemirror/mode/xml/xml.js',
'cron-parser',
'cropperjs',
'crypto-js/aes',
'crypto-js/enc-base64',
'crypto-js/enc-utf8',
'crypto-js/md5',
'crypto-js/mode-ecb',
'crypto-js/pad-pkcs7',
'dom-align',
'echarts',
'echarts/charts',
'echarts/components',
'echarts/core',
'echarts/renderers',
'emoji-mart-vue-fast/src',
'intro.js',
'lodash-es',
'md5',
'nprogress',
'path-to-regexp',
'pinia',
'print-js',
'qrcode',
'qs',
'resize-observer-polyfill',
'showdown',
'sortablejs',
'tinymce/icons/default/icons',
'tinymce/plugins/advlist',
'tinymce/plugins/anchor',
'tinymce/plugins/autolink',
'tinymce/plugins/autosave',
'tinymce/plugins/code',
'tinymce/plugins/codesample',
'tinymce/plugins/contextmenu',
'tinymce/plugins/directionality',
'tinymce/plugins/fullscreen',
'tinymce/plugins/hr',
'tinymce/plugins/image',
'tinymce/plugins/insertdatetime',
'tinymce/plugins/link',
'tinymce/plugins/lists',
'tinymce/plugins/media',
'tinymce/plugins/nonbreaking',
'tinymce/plugins/noneditable',
'tinymce/plugins/pagebreak',
'tinymce/plugins/paste',
'tinymce/plugins/preview',
'tinymce/plugins/print',
'tinymce/plugins/save',
'tinymce/plugins/searchreplace',
'tinymce/plugins/spellchecker',
'tinymce/plugins/tabfocus',
'tinymce/plugins/table',
'tinymce/plugins/template',
'tinymce/plugins/textcolor',
'tinymce/plugins/textpattern',
'tinymce/plugins/visualblocks',
'tinymce/plugins/visualchars',
'tinymce/plugins/wordcount',
'tinymce/themes/silver',
'tinymce/tinymce',
'vditor',
'vue',
'vue-i18n',
'vue-print-nb-jeecg/src/printarea',
'vue-router',
'vue-types',
'vxe-table',
'vxe-table-plugin-antd',
'xe-utils',
'xss',
], ],
}, },
}; };