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文件太大，有办法减小体积吗？