使用vue打包，vendor文件過大，或者是app.js文件很大

第一次使用vue2.0開發，以前都是用的angular1.x。在使用vue-cli腳手架打包後（UI用的Element-ui），發現vendor文件很大，將近1M左右。。後來翻閱資料才明白，原來webpack把全部的庫都打包到了一塊兒，致使文件很大。

個人解決辦法：

  一、把不常改變的庫放到index.html中，經過cdn引入，好比下面這樣：

而後找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加如下代碼

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
 },

這樣webpack就不會把vue.js, vue-router, element-ui庫打包了。聲明一下，我把main.js中對element的引入刪掉了，否則我發現打包後的app.css仍是會把element的css打包進去，刪掉後就沒了。

而後你打包就會發現vendor文件小了不少~

若是你還不知足，請接着往下看·····

 

二、vue路由的懶加載（具體做用，官網查看哦，這裏就很少介紹了）。

剛開始咱們使用路由多是下面這樣（router.js），這樣一開始進入頁面就會把全部的路由資源都加載，若是項目大，加載的內容就會不少，等待的時間頁就會越長，致使給用戶的很差的體驗效果。

爲了把路由分模塊，而後每次進入一個新頁面才加載該頁面所須要的資源（也就是異步加載路由），咱們能夠像下面這樣使用(router.js)：

而後你打包就會發現，多了不少1.xxxxx.js；2.xxxxx.js等等，而vendor.xxx.js沒了，剩下app.js 和manifest.js，並且app.js還很小，我這裏是100k多一點。

這裏我沒有生成map文件，這樣打包速度快一些，整個項目文件也小不少（map文件通常都很大）;

取消生成map文件，找到config/index.js ，修改下面箭頭指向爲false，就好了。

剛開始使用，一路磕磕碰碰在所不免，也借鑑了不少前輩們的經驗，因此在這裏記錄一下，但願能幫到更多的人。