您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何解決使用vue打包時(shí)文件過大的問題”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決使用vue打包時(shí)文件過大的問題”這篇文章吧。
我的解決辦法:
1、把不常改變的庫(kù)放到index.html中,通過cdn引入,比如下面這樣:
然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代碼
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', },
這樣webpack就不會(huì)把vue.js, vue-router, element-ui庫(kù)打包了。聲明一下,我把main.js中對(duì)element的引入刪掉了,不然我發(fā)現(xiàn)打包后的app.css還是會(huì)把element的css打包進(jìn)去,刪掉后就沒了。
然后你打包就會(huì)發(fā)現(xiàn)vendor文件小了很多~
如果你還不滿足,請(qǐng)接著往下看·····
2、vue路由的懶加載(具體作用,官網(wǎng)查看哦,這里就不多介紹了)。
剛開始我們使用路由可能是下面這樣(router.js),這樣一開始進(jìn)入頁(yè)面就會(huì)把所有的路由資源都加載,如果項(xiàng)目大,加載的內(nèi)容就會(huì)很多,等待的時(shí)間頁(yè)就會(huì)越長(zhǎng),導(dǎo)致給用戶的不好的體驗(yàn)效果。
為了把路由分模塊,然后每次進(jìn)入一個(gè)新頁(yè)面才加載該頁(yè)面所需要的資源(也就是異步加載路由),我們可以像下面這樣使用(router.js):
然后你打包就會(huì)發(fā)現(xiàn),多了很多1.xxxxx.js;2.xxxxx.js等等,而vendor.xxx.js沒了,剩下app.js 和manifest.js,而且app.js還很小,我這里是100k多一點(diǎn)。
這里我沒有生成map文件,這樣打包速度快一些,整個(gè)項(xiàng)目文件也小很多(map文件一般都很大);
取消生成map文件,找到config/index.js ,修改下面箭頭指向?yàn)閒alse,就行了。
以上是“如何解決使用vue打包時(shí)文件過大的問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。