建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家展示了“如何解決使用vue打包時(shí)文件過大的問題”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決使用vue打包時(shí)文件過大的問題”這篇文章吧。
我的解決辦法：
1、把不常改變的庫放到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庫打包了。聲明一下，我把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)入頁面就會(huì)把所有的路由資源都加載，如果項(xiàng)目大，加載的內(nèi)容就會(huì)很多，等待的時(shí)間頁就會(huì)越長，導(dǎo)致給用戶的不好的體驗(yàn)效果。
為了把路由分模塊，然后每次進(jìn)入一個(gè)新頁面才加載該頁面所需要的資源（也就是異步加載路由），我們可以像下面這樣使用(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前題目：如何解決使用vue打包時(shí)文件過大的問題-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.ef60e0e.cn/article/docipg.html
