vue加载优化方案

我们的项目随着组件的加入,首次加载的js文件越来越大,用户等待时间越来越长;之前想着使用webpack的splitCoding来解决,看了webpack的官方文档可以配置optimization的

moduleIds这个属性来将node_modules中的公用的库的代码提取出来,如果代码没有变化,那么就不会改变文件的hash值,但是我用的是vue的nuxt框架,设置这个属性后每次build还是会生成新的hash值,每次用户都还是会下载新的文件,而我们的项目又会经常部署,显然这个方案不行;
 
最后我只能加一些比较大的库像threejs,phaser,videojs等直接加载.min.js文件,加载完后在执行相关的代码,
还有一些则是采用js的动态加载方案

,最后将项目的代码的首次加载时间控制在1-2秒左右,体验效果好了很多!! 

猜你喜欢

转载自www.cnblogs.com/wlinglinux/p/12022460.html