1、路由懒加载
路由懒加载简单来说就是访问到当前页面才会加载相关资源,提高页面加载速度。
{
path: '/login', name: 'login',
: => ([';], )
}
2、引入CDN
细心的同学会发现,项目打包完成后dist文件中有个 xxxx.js文件,此文件由引入的插件、库生成vue提升首屏加载速度,引入的越多,文件就越大vue提升首屏加载速度,为此将体积较大的插件通过CDN引入,降低文件的大小。
假设vue项目引用以下组件
;;
;./App.;
from './'
axios from ';
iView from ';
';
(1)、在/build/.base.conf.js中,增加
. = {
: {
';: 'Vue',
';: ';,
';: ';
}
}
(2)、为解决dev环境下,重复引用库的问题,复制/index.html为/index.dev.html,并修改/build/.dev.conf
: [
new ({
: 'index.;,
// : 'index.;,
: 'index.dev.;,
: true
})
]
(3)、在index.html中,引入cdn文件
(4)、提取css到外部,减少app.css体积
去除/src/main.js中引入的css文件,改为在开发环境下使用
;iview/dist//iview.css
if (.;') {
('mint-;)
}
在/index.hrml中引入CDN文件
3、使用组建按需加入
如对于-ui,需要那部分就使用哪部分。
4、将组件写的css整合到一个文件里;
5、打包时可以不下载Map文件,因为Map文件占内存也很大