vue性能优化

1.懒加载组件及js模块

a.引入模块

//main.js
const getModuleA = () => import('./module_a.js')
getModuleA()
  .then({ doStuff } => doStuff())

b.注册组件

const lazyComponent = () => import('Component.vue')
export default {
  components: { lazyComponent }
}

c.vue-router配置

{
    path: '/Splash',
    name: 'Splash',
    component: ()=>import('@/components/Splash')
}

2.分离js文件(vue cli 3)

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}