如下图所示，开启了gzip后js的大小比未开启gzip的js小2/3左右，所以如果没开启gzip，感觉我们做的再多意义也不大，如何看自己的项目有没有开启gzip，如下图所示，开启了gzip，在浏览器的控制台Content-Encoding一栏会显示gzip，否则没有。Nginx如果开启gzip，请自行搜索，或者叫服务端来开启。
第五步：检查路由懒加载
路由组件如果不按需加载的话，就会把所有的组件一次性打包到app.js中，导致首次加载内容过多，vue官方文档中也有提到， 。
{ name: 'vipBoxActivity', path:'vipBoxActivity', component(resolve) { require(['COMPONENTS/vipBox/vipBoxActivity/main.vue'], resolve) } },
{ path: 'buyerSummary', name: 'buyerSummary', component: () => import('VIEWS/buyer/buyerSummary/index'), },
上面的两种引入组件的方法都是正确的，都能实现路由的懒加载。
最后
最后我们可以发现vendor.js的大小减少了很多。其中第一步到第三步我们项目中都没做，第四步和第五步我们做了。如果读者你没做，一定要注意了。最后希望这篇文字能够对大家有一点点帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: