【性能大优化】首屏缩短至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
*/
import { VitePWA } from 'vite-plugin-pwa';

View File

@ -23,151 +23,148 @@
"dependencies": {
"@jeecg/online": "3.5.3-beta3",
"@qiaoqiaoyun/drag-free": "^1.1.3",
"@iconify/iconify": "^2.2.1",
"@ant-design/colors": "^6.0.0",
"@iconify/iconify": "^3.1.1",
"@ant-design/colors": "^7.0.0",
"@ant-design/icons-vue": "^6.1.0",
"@logicflow/core": "^1.1.13",
"@logicflow/extension": "^1.1.13",
"@vue/shared": "^3.2.33",
"@vue/runtime-core": "^3.2.33",
"@vueuse/shared": "^8.3.0",
"@vueuse/core": "^8.3.0",
"@zxcvbn-ts/core": "^2.0.1",
"@logicflow/core": "^1.2.10",
"@logicflow/extension": "^1.2.10",
"@vue/shared": "^3.3.4",
"@vue/runtime-core": "^3.3.4",
"@vueuse/shared": "^10.2.1",
"@vueuse/core": "^10.2.1",
"@zxcvbn-ts/core": "^3.0.3",
"ant-design-vue": "^3.2.20",
"axios": "^0.26.1",
"axios": "^1.4.0",
"china-area-data": "^5.0.1",
"clipboard": "^2.0.8",
"clipboard": "^2.0.11",
"codemirror": "^5.65.3",
"cron-parser": "^3.5.0",
"cropperjs": "^1.5.12",
"cron-parser": "^4.8.1",
"cropperjs": "^1.5.13",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.1",
"dom-align": "^1.12.2",
"echarts": "^5.3.2",
"emoji-mart-vue-fast": "^11.1.1",
"dayjs": "^1.11.9",
"dom-align": "^1.12.4",
"echarts": "^5.4.3",
"emoji-mart-vue-fast": "^15.0.0",
"enquire.js": "^2.1.6",
"intro.js": "^5.1.0",
"intro.js": "^7.0.1",
"lodash-es": "^4.17.21",
"lodash.get": "^4.4.2",
"md5": "^2.3.0",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.2.0",
"pinia": "2.0.12",
"path-to-regexp": "^6.2.1",
"pinia": "2.1.4",
"print-js": "^1.6.0",
"pinyin-pro": "^3.11.0",
"qs": "^6.10.3",
"qrcode": "^1.5.0",
"qs": "^6.11.2",
"qrcode": "^1.5.3",
"qrcodejs2": "0.0.2",
"resize-observer-polyfill": "^1.5.1",
"showdown": "^2.1.0",
"sortablejs": "^1.15.0",
"tinymce": "^5.10.3",
"vditor": "^3.8.13",
"vue": "^3.2.47",
"vue-cropper": "^0.5.6",
"vditor": "^3.9.4",
"vue": "^3.3.4",
"vue-cropper": "^0.6.2",
"vue-cropperjs": "^5.0.0",
"vue-i18n": "^9.1.9",
"vue-i18n": "^9.2.2",
"vue-infinite-scroll": "^2.0.2",
"vue-print-nb-jeecg": "^1.0.12",
"vue-router": "^4.0.14",
"vue-types": "^4.1.1",
"vue-router": "^4.2.4",
"vue-types": "^5.1.0",
"vuedraggable": "^4.1.0",
"vxe-table": "4.1.0",
"vxe-table-plugin-antd": "3.0.5",
"xe-utils": "^3.3.1",
"vue-json-pretty": "^2.0.6",
"xss": "^1.0.13"
"vue-json-pretty": "^2.2.4",
"xss": "^1.0.14"
},
"devDependencies": {
"@commitlint/cli": "^16.2.3",
"@commitlint/config-conventional": "^16.2.1",
"@iconify/json": "^2.1.30",
"@purge-icons/generated": "^0.8.1",
"@types/codemirror": "^5.60.5",
"@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^17.6.6",
"@iconify/json": "^2.2.91",
"@purge-icons/generated": "^0.9.0",
"@types/codemirror": "^5.60.8",
"@types/crypto-js": "^4.1.1",
"@types/fs-extra": "^9.0.13",
"@types/inquirer": "^8.2.1",
"@types/intro.js": "^3.0.2",
"@types/jest": "^27.0.2",
"@types/lodash-es": "^4.17.6",
"@types/mockjs": "^1.0.6",
"@types/node": "^17.0.25",
"@types/fs-extra": "^11.0.1",
"@types/inquirer": "^9.0.3",
"@types/intro.js": "^5.1.1",
"@types/jest": "^29.5.3",
"@types/lodash-es": "^4.17.8",
"@types/mockjs": "^1.0.7",
"@types/node": "^20.4.2",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.2",
"@types/qrcode": "^1.5.1",
"@types/qs": "^6.9.7",
"@types/pinyin": "^2.10.0",
"@types/showdown": "^1.9.4",
"@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"@vitejs/plugin-legacy": "^2.0.0",
"@vitejs/plugin-vue": "^3.0.1",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/compiler-sfc": "^3.2.33",
"@vue/test-utils": "^2.0.0-rc.21",
"autoprefixer": "^10.4.4",
"commitizen": "^4.2.4",
"conventional-changelog-cli": "^2.2.2",
"@types/showdown": "^2.0.1",
"@types/sortablejs": "^1.15.1",
"@typescript-eslint/eslint-plugin": "^6.1.0",
"@typescript-eslint/parser": "^6.1.0",
"@vitejs/plugin-legacy": "^4.1.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/compiler-sfc": "^3.3.4",
"@vue/test-utils": "^2.4.0",
"autoprefixer": "^10.4.14",
"commitizen": "^4.3.0",
"conventional-changelog-cli": "^3.0.0",
"cross-env": "^7.0.3",
"cz-git": "^1.3.9",
"czg": "^1.3.9",
"dotenv": "^16.0.0",
"eslint": "^8.22.0",
"eslint-config-prettier": "^8.6.0",
"eslint-define-config": "^1.14.0",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.9.0",
"esno": "^0.14.1",
"fs-extra": "^10.1.0",
"http-server": "^14.0.0",
"husky": "^7.0.4",
"inquirer": "^8.2.2",
"is-ci": "^3.0.0",
"jest": "^27.3.1",
"less": "^4.1.2",
"lint-staged": "12.3.7",
"cz-git": "^1.7.0",
"czg": "^1.7.0",
"dotenv": "^16.3.1",
"eslint": "^8.45.0",
"eslint-config-prettier": "^8.8.0",
"eslint-define-config": "^1.21.0",
"eslint-plugin-jest": "^27.2.3",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.15.1",
"esno": "^0.17.0",
"fs-extra": "^11.1.1",
"http-server": "^14.1.1",
"husky": "^8.0.3",
"inquirer": "^9.2.8",
"is-ci": "^3.0.1",
"jest": "^29.6.1",
"less": "^4.1.3",
"lint-staged": "13.2.3",
"npm-run-all": "^4.1.5",
"picocolors": "^1.0.0",
"postcss": "^8.4.12",
"postcss-html": "^1.4.1",
"postcss": "^8.4.26",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"prettier": "^2.6.2",
"pretty-quick": "^3.1.1",
"rimraf": "^3.0.2",
"rollup": "^2.70.2",
"prettier": "^3.0.0",
"pretty-quick": "^3.1.3",
"rimraf": "^5.0.1",
"rollup": "^3.26.3",
"rollup-plugin-visualizer": "^5.9.2",
"stylelint": "^14.7.1",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended": "^7.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-order": "^5.0.0",
"ts-jest": "^27.0.7",
"ts-node": "^10.7.0",
"typescript": "^4.6.3",
"vite": "^3.2.3",
"stylelint": "^15.10.1",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended": "^13.0.0",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard": "^34.0.0",
"stylelint-order": "^6.0.3",
"ts-jest": "^29.1.1",
"ts-node": "^10.9.1",
"typescript": "^5.1.6",
"vite": "^4.4.4",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"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-optimize-persist": "^0.1.2",
"vite-plugin-package-config": "^0.1.1",
"vite-plugin-purge-icons": "^0.8.2",
"vite-plugin-pwa": "^0.12.3",
"vite-plugin-purge-icons": "^0.9.2",
"vite-plugin-pwa": "^0.16.4",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"@rys-fe/vite-plugin-theme": "^0.8.6",
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
"unocss": "^0.55.3",
"vue-eslint-parser": "^8.3.0",
"vue-tsc": "^0.33.9"
"vue-eslint-parser": "^9.3.1",
"vue-tsc": "^1.8.5"
},
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china",
"rollup": "^2.72.0"
"rollup": "^3.26.3"
},
"repository": {
"type": "git",
@ -180,112 +177,5 @@
"homepage": "https://github.com/jeecgboot/jeecgboot-vue3",
"engines": {
"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;
}
}
:deep .jeecg-basic-table .ant-table-wrapper .ant-table-title {
:deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title) {
min-height: 0;
}
</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;
}
</style>

View File

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

View File

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

View File

@ -50,6 +50,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
find: /\/#\//,
replacement: pathResolve('types') + '/',
},
{
find: /@\//,
replacement: pathResolve('src') + '/',
},
// /#/xxxx => types/xxxx
{
find: /#\//,
replacement: pathResolve('types') + '/',
},
],
},
server: {
@ -84,7 +93,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// vue vue-router合并打包
vue: ['vue', 'vue-router'],
},
}
},
},
// 关闭brotliSize显示可以稍微减少打包时间
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
plugins: createVitePlugins(viteEnv, isBuild),
// 预加载构建配置(首屏性能)
optimizeDeps: {
esbuildOptions: {
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: [
'@vue/runtime-core',
'@vue/shared',
'@iconify/iconify',
'ant-design-vue/es/locale/zh_CN',
'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',
],
},
};