第一次使用vue2.0開(kāi)發(fā)，之前都是用的angular1.x。在使用vue-cli腳手架打包后（UI用的Element-ui），發(fā)現(xiàn)vendor文件很大，將近1M左右。。后來(lái)翻閱資料才明白，原來(lái)webpack把所有的庫(kù)都打包到了一起，導(dǎo)致文件很大。

我的解決辦法：

  1、把不常改變的庫(kù)放到index.html中，通過(guò)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)去，刪掉后就沒(méi)了。

然后你打包就會(huì)發(fā)現(xiàn)vendor文件小了很多~

如果你還不滿足，請(qǐng)接著往下看·····

2、vue路由的懶加載（具體作用，官網(wǎng)查看哦，這里就不多介紹了）。

剛開(kāi)始我們使用路由可能是下面這樣（router.js），這樣一開(kāi)始進(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沒(méi)了，剩下app.js 和manifest.js，而且app.js還很小，我這里是100k多一點(diǎn)。

這里我沒(méi)有生成map文件，這樣打包速度快一些，整個(gè)項(xiàng)目文件也小很多（map文件一般都很大）;

取消生成map文件，找到config/index.js ，修改下面箭頭指向?yàn)閒alse，就行了。

剛開(kāi)始使用，一路磕磕碰碰在所難免，也借鑒了很多前輩們的經(jīng)驗(yàn)，所以在這里記錄一下，希望能幫到更多的人。

總結(jié)

以上所述是小編給大家介紹的使用vue打包時(shí)vendor文件過(guò)大或者是app.js文件很大的問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論