脚本宝典收集整理的这篇文章主要介绍了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文件太大，有办法减少体积吗？

脚本宝典总结

以上是脚本宝典为你收集整理的vue-cli打包后的思索--代码优化全部内容，希望文章能够帮你解决vue-cli打包后的思索--代码优化所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。