#tech/vue/build优化

优化之前 main-bundle 达到29MB

优化过程

猜测主要占用大小的是

• echart
• bpmn
• aggrid
• monaco-editor
• it-markdown

原始组件改写

yv-src-editor.vue 改写至 yv-src-editor-inner.vue

import {defineAsyncComponent} from 'vue'  
  
// 异步加载 yv-src-editor-inner.vue 组件  
const Inner = defineAsyncComponent(() => import('./yv-src-editor-inner.vue'))  
export default Inner

引用组件改写

原来写法

import {AgGridVue} from "ag-grid-vue3";

Vue.component('ag-grid-vue', AgGridVue)

改写成

import {defineAsyncComponent} from 'vue'

Vue.component('ag-grid-vue', defineAsyncComponent(() => {  
    return Promise.all([  
        import('ag-grid-vue3'),  
        import ('../../ag_grid_license')  
    ]).then(([module, license]) => {  
        return module.AgGridVue  
    })  
}))

定义组件改写

import YvVjsonFlowgraph from './yv-vjson-flowgraph.vue'
import YvDesignFlowgraph from './yv-design-flowgraph.vue'
import YvDesignFlowgraphProp from './yv-design-flowgraph-prop.vue'

install(Vue) {
	Vue.component('YvVjsonFlowgraph', YvVjsonFlowgraph)
	Vue.component('YvDesignFlowgraph', YvDesignFlowgraph)
	Vue.component('YvDesignFlowgraphProp', YvDesignFlowgraphProp)
}

改写为

install(Vue) {  
    Vue.component('YvVjsonFlowgraph', defineAsyncComponent(() => import('./yv-vjson-flowgraph.vue')))  
    Vue.component('YvDesignFlowgraph', defineAsyncComponent(() => import('./yv-design-flowgraph.vue')))  
    Vue.component('YvDesignFlowgraphProp', defineAsyncComponent(() => import('./yv-design-flowgraph-prop.vue')))  
},

优化成果

main-bundle 源码构成

组件	开始行	结束行	总行数
lodash	32	3707	3675
@vue/shared	3707	3864	157
@vue/reactivity	3865	4664	799
@vue/runtime-core	4665	9801	5136
@vue/runtime-dom	9801	10807	1006
vue	10808	20059	9251
@vue/shared	20060	26883	6823
@vue/reactivity	26884	35330	8446
element-ui	35331	102510	67179
pinia+业务代码	102511	253323	150812
Sortable+业务代码	253324	309589	56265
vue-router	309589	313363	3774

最终 main 主包体 12MB