vue-cli打包後的思索--代碼優化

書接上文，利用http-server測試vue-cli打包後的項目。已經能夠用http-server測試打包後的項目了，但是看到打包後的代碼。。。

.map文件

• 第一次打包，發現打包後的文件怎麼這麼大，.map文件又是什麼鬼？
   
  
   
• 通過一頓搜索，發現js的map文件.原來map文件只是幫助咱們調試用的，畢竟打包後的代碼都是壓縮的，調試起來很不方便。測試沒問題，正式上線時，咱們徹底能夠去掉這個文件。
   

  
   

• 怎麼去掉這個文件呢？一個一個刪？no！no！
   
  只需把config/index.js中的productionSourceMap: true改成productionSourceMap: false便可
   

  
   

• 從新打包的代碼
   
  

代碼太大

打包後的代碼，體積仍是有點大？如何減少體積，提升首屏加載速度呢

• 路由懶加載

  以前沒使用路由懶加載功能，致使全部的代碼都打包在了一個文件中，又查看了一下vue-router的路由懶加載,參照其中的示例，把路由組件的引入方式做了一些更改。

  • 更改前
    
  • 更改後

    

  • 打包後

    
    使用路由懶加載打包的代碼，數量上雖然多了，可是經過查看引入狀況，首次加載，並不會所有加載，每次打開一個新路由，纔會加載相應的js,實現了按需加載，提升了渲染效率。

vendor.js

即便使用了路由懶加載，發現其中vendor這個js文件貌似一直都沒變化，仍是特別大，這個又是什麼文件呢？通過一輪搜索後才發現其真面目。
　　參考：vue-cli的webpack模板項目配置文件分析、vue-cli中的webpack配置
原來這個文件是咱們npm安裝的那些庫

如何減少這個文件的體積呢？我還沒研究透，你們仍是移步這個問題，本身去探索吧。

使用vue-cli生成的vendor.js文件太大，有辦法減小體積嗎？