test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-04 21:18:16 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

优化element plus按需载入时，组件对应的样式文件会导致vite重复重载页面并加载很慢的问题

Browse Source
This commit is contained in:
hooray 2022-05-22 04:31:07 +08:00
parent 0d9ebc5599
commit b286b7ffdd
8 changed files with 69 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -55,7 +55,7 @@
"postcss-html": "^1.4.1",
"postcss-scss": "^4.0.4",
"sass": "^1.52.1",
"stylelint": "^14.8.2",
"stylelint": "^14.8.3",
"stylelint-config-recommended-scss": "^6.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^25.0.0",

65
pnpm-lock.yaml
View File

@ -11,7 +11,7 @@ specifiers:
'@vueuse/integrations': ^8.5.0
axios: ^0.27.2
dayjs: ^1.11.2
element-plus: ^2.2.0
element-plus: 2.2.0
eslint: ^8.16.0
eslint-plugin-vue: ^9.0.1
esno: ^0.16.3
@ -33,7 +33,7 @@ specifiers:
postcss-scss: ^4.0.4
qs: ^6.10.3
sass: ^1.52.1
stylelint: ^14.8.2
stylelint: ^14.8.3
stylelint-config-recommended-scss: ^6.0.0
stylelint-config-recommended-vue: ^1.4.0
stylelint-config-standard: ^25.0.0
@ -53,7 +53,7 @@ specifiers:
vite-plugin-svg-icons: ^2.0.1
vite-plugin-vue-layouts: ^0.6.0
vite-plugin-vue-setup-extend: ^0.4.0
vue: 3.2.33
vue: ^3.2.33
vue-eslint-parser: ^9.0.2
vue-router: ^4.0.15
@ -95,11 +95,11 @@ devDependencies:
postcss-html: 1.4.1
postcss-scss: 4.0.4
sass: 1.52.1
stylelint: 14.8.2
stylelint-config-recommended-scss: 6.0.0_stylelint@14.8.2
stylelint-config-recommended-vue: 1.4.0_wdct7lrbpt3f5qukrrtdrzdofe
stylelint-config-standard: 25.0.0_stylelint@14.8.2
stylelint-scss: 4.2.0_stylelint@14.8.2
stylelint: 14.8.3
stylelint-config-recommended-scss: 6.0.0_stylelint@14.8.3
stylelint-config-recommended-vue: 1.4.0_qry3c7tpre6jvvuytvffjzlnpe
stylelint-config-standard: 25.0.0_stylelint@14.8.3
stylelint-scss: 4.2.0_stylelint@14.8.3
svgo: 2.8.0
unplugin-auto-import: 0.7.2_4xyn6ao5ngwbgzbefoyccvabvi
unplugin-vue-components: 0.19.5_vite@2.9.9+vue@3.2.33
@ -1208,8 +1208,8 @@ packages:
engines: {node: '>=8'}
dev: true
/async-validator/4.0.7:
resolution: {integrity: sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==}
/async-validator/4.1.1:
resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==}
dev: false
/async/0.9.2:
@ -2165,7 +2165,7 @@ packages:
'@types/lodash': 4.14.182
'@types/lodash-es': 4.17.6
'@vueuse/core': 8.5.0_vue@3.2.33
async-validator: 4.0.7
async-validator: 4.1.1
dayjs: 1.11.2
escape-html: 1.0.3
lodash: 4.17.21
@ -4758,10 +4758,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/normalize-selector/0.2.0:
resolution: {integrity: sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=, tarball: normalize-selector/download/normalize-selector-0.2.0.tgz}
dev: true
/normalize-wheel-es/1.1.2:
resolution: {integrity: sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png==}
dev: false
@ -6059,7 +6055,7 @@ packages:
resolution: {integrity: sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=, tarball: style-search/download/style-search-0.1.0.tgz}
dev: true
/stylelint-config-html/1.0.0_wdct7lrbpt3f5qukrrtdrzdofe:
/stylelint-config-html/1.0.0_qry3c7tpre6jvvuytvffjzlnpe:
resolution: {integrity: sha1-FyrLmW7kyFToxnD8/3f/DZjTvsI=, tarball: stylelint-config-html/download/stylelint-config-html-1.0.0.tgz}
engines: {node: ^12 || >=14}
peerDependencies:
@ -6067,23 +6063,23 @@ packages:
stylelint: '>=14.0.0'
dependencies:
postcss-html: 1.4.1
stylelint: 14.8.2
stylelint: 14.8.3
dev: true
/stylelint-config-recommended-scss/6.0.0_stylelint@14.8.2:
/stylelint-config-recommended-scss/6.0.0_stylelint@14.8.3:
resolution: {integrity: sha512-6QOe2/OzXV2AP5FE12A7+qtKdZik7Saf42SMMl84ksVBBPpTdrV+9HaCbPYiRMiwELY9hXCVdH4wlJ+YJb5eig==}
peerDependencies:
stylelint: ^14.4.0
dependencies:
postcss-scss: 4.0.4
stylelint: 14.8.2
stylelint-config-recommended: 7.0.0_stylelint@14.8.2
stylelint-scss: 4.2.0_stylelint@14.8.2
stylelint: 14.8.3
stylelint-config-recommended: 7.0.0_stylelint@14.8.3
stylelint-scss: 4.2.0_stylelint@14.8.3
transitivePeerDependencies:
- postcss
dev: true
/stylelint-config-recommended-vue/1.4.0_wdct7lrbpt3f5qukrrtdrzdofe:
/stylelint-config-recommended-vue/1.4.0_qry3c7tpre6jvvuytvffjzlnpe:
resolution: {integrity: sha512-DVJqyX2KvMCn9U0+keL12r7xlsH26K4Vg8NrIZuq5MoF7g82DpMp326Om4E0Q+Il1o+bTHuUyejf2XAI0iD04Q==}
engines: {node: ^12 || >=14}
peerDependencies:
@ -6092,29 +6088,29 @@ packages:
dependencies:
postcss-html: 1.4.1
semver: 7.3.5
stylelint: 14.8.2
stylelint-config-html: 1.0.0_wdct7lrbpt3f5qukrrtdrzdofe
stylelint-config-recommended: 7.0.0_stylelint@14.8.2
stylelint: 14.8.3
stylelint-config-html: 1.0.0_qry3c7tpre6jvvuytvffjzlnpe
stylelint-config-recommended: 7.0.0_stylelint@14.8.3
dev: true
/stylelint-config-recommended/7.0.0_stylelint@14.8.2:
/stylelint-config-recommended/7.0.0_stylelint@14.8.3:
resolution: {integrity: sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==}
peerDependencies:
stylelint: ^14.4.0
dependencies:
stylelint: 14.8.2
stylelint: 14.8.3
dev: true
/stylelint-config-standard/25.0.0_stylelint@14.8.2:
/stylelint-config-standard/25.0.0_stylelint@14.8.3:
resolution: {integrity: sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==}
peerDependencies:
stylelint: ^14.4.0
dependencies:
stylelint: 14.8.2
stylelint-config-recommended: 7.0.0_stylelint@14.8.2
stylelint: 14.8.3
stylelint-config-recommended: 7.0.0_stylelint@14.8.3
dev: true
/stylelint-scss/4.2.0_stylelint@14.8.2:
/stylelint-scss/4.2.0_stylelint@14.8.3:
resolution: {integrity: sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA==}
peerDependencies:
stylelint: ^14.5.1
@ -6124,11 +6120,11 @@ packages:
postcss-resolve-nested-selector: registry.nlark.com/postcss-resolve-nested-selector/0.1.1
postcss-selector-parser: registry.nlark.com/postcss-selector-parser/6.0.6
postcss-value-parser: registry.nlark.com/postcss-value-parser/4.1.0
stylelint: 14.8.2
stylelint: 14.8.3
dev: true
/stylelint/14.8.2:
resolution: {integrity: sha512-tjDfexCYfoPdl/xcDJ9Fv+Ko9cvzbDnmdiaqEn3ovXHXasi/hbkt5tSjsiReQ+ENqnz0eltaX/AOO+AlzVdcNA==}
/stylelint/14.8.3:
resolution: {integrity: sha512-aLpskXwSgFEBYbFRKA/BfuyYMGuXNtn2t5GqoffNPSezvw97x/vVNWcZNF0+cwt+LBjfvyq9/MRE3OjInGRgNA==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
hasBin: true
dependencies:
@ -6155,7 +6151,6 @@ packages:
meow: 9.0.0
micromatch: 4.0.5
normalize-path: 3.0.0
normalize-selector: 0.2.0
picocolors: 1.0.0
postcss: 8.4.13
postcss-media-query-parser: 0.2.3

2
src/elementPlusServer.js Normal file
View File

@ -0,0 +1,2 @@
// 误删，该文件用于解决 element plus 在开发环境下按需引入导致页面频繁刷新的问题
export default function importElementPlus() {}

2
src/layout/components/SubSidebar/index.vue
View File

@ -57,7 +57,7 @@ function onSidebarScroll(e) {
bottom: 0;
background-color: var(--g-sub-sidebar-bg);
box-shadow: 10px 0 10px -10px var(--g-box-shadow-color);
transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s;
transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s, width 0.3s;
&.is-collapse {
width: 64px;
.sidebar-logo {

3
src/main.js
View File

@ -8,6 +8,9 @@ app.use(pinia)
import router from './router'
app.use(router)
import importElementPlus from '@/elementPlusServer'
importElementPlus(app)
import globalProperties from '@/util/global.properties'
globalProperties(app)

38
vite.config.js
View File

@ -21,15 +21,6 @@ export default ({ mode, command }) => {
scssResources.push(`@use "src/assets/sprites/_${dirname}.scss" as *;`)
}
})
// BUG https://github.com/element-plus/element-plus/issues/4916
const optimizeDepsElementPlusIncludes = ['element-plus/es']
fs.readdirSync('node_modules/element-plus/es/components').map(dirname => {
fs.access(`node_modules/element-plus/es/components/${dirname}/style/css.mjs`, err => {
if (!err) {
optimizeDepsElementPlusIncludes.push(`element-plus/es/components/${dirname}/style/css`)
}
})
})
return defineConfig({
base: './',
// 开发服务器选项 https://cn.vitejs.dev/config/#server-options
@ -56,9 +47,34 @@ export default ({ mode, command }) => {
}
},
optimizeDeps: {
include: optimizeDepsElementPlusIncludes
include: [
'element-plus/es',
'element-plus/es/components/message/style/css',
'element-plus/es/components/notification/style/css',
'element-plus/es/components/message-box/style/css'
]
},
plugins: createVitePlugins(env, command === 'build'),
plugins: [
...createVitePlugins(env, command === 'build'),
// BUG https://github.com/antfu/unplugin-vue-components/issues/361
{
name: 'dev-auto-import-element-plus',
transform(code, id) {
if (command === 'serve' && /src\/elementPlusServer.js$/.test(id)) {
return {
code: `
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
export default function importElementPlus(app) {
app.use(ElementPlus);
}
`,
map: null
}
}
}
}
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')

8
vite/plugins/components.js
View File

@ -1,11 +1,11 @@
import components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default function createComponents() {
export default function createComponents(isBuild) {
const resolvers = []
isBuild && resolvers.push(ElementPlusResolver())
return components({
resolvers: [
ElementPlusResolver()
],
resolvers,
dirs: ['src/components'],
include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/],
dts: false

2
vite/plugins/index.js
View File

@ -20,7 +20,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
vitePlugins.push(createJsx())
vitePlugins.push(createHtml(viteEnv, isBuild))
vitePlugins.push(createAutoImport())
vitePlugins.push(createComponents())
vitePlugins.push(createComponents(isBuild))
vitePlugins.push(createSetupExtend())
vitePlugins.push(createSvgIcon(isBuild))
vitePlugins.push(createMock(viteEnv, isBuild))