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文件占內存也很大