如何解決使用vue打包時vendor檔案過大或是app.js檔案很大的問題

這篇文章主要介紹了使用vue打包時vendor文件過大或者是app.js文件很大問題的解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

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

我的解決方法：

  1、把不常改變的函式庫放到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檔案小了很多~

如果你還不滿足，請接著往下看·····

2、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，就行了。

剛開始使用，一路磕磕碰碰在所難免，也藉鑒了很多前輩們的經驗，所以在這裡記錄一下，希望能幫到更多的人。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何解決vue專案打包後開啟頁面空白的問題

Vue webapp專案透過HBulider打包原生APP的介紹

以上是如何解決使用vue打包時vendor檔案過大或是app.js檔案很大的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！