書接上文，利用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文件太大，有辦法減少體積嗎？

總結

以上是生活随笔為你收集整理的vue-cli打包后的思索--代码优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。