vue首屏加载优化-1

库使用情况

vue

vue-router

axios

muse-ui

material-icons

vue-baidu-map

未优化前

首先我们在正常情况下build

优化

1. 按需加载

当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码.

修改前：

修改后：

importappBarfrom'muse-ui/src/appBar'importtoastfrom'muse-ui/src/toast'importdrawerfrom'muse-ui/src/drawer'importpopupfrom'muse-ui/src/popup'Vue.component(appBar.name, appBar);Vue.component(toast.name, toast);Vue.component(drawer.name, drawer);Vue.component(popup.name, popup);

这里有点麻烦的就是你要把整个项目用到的muse-ui组件都注册一遍,当然你也可以只在用到的页面做局部引用.

让我们来看看使用按需加载后的效果?

在当前项目引用了16个muse-ui组件的情况下 css减少了80kb,js减少了快200kb.