vue-cli 首屏加载优化问题
使用vue-cli构建的项目,在默认情况下,执行npmrunbuild 会将所有的js代码打包为一个整体,
打包位置是dist/static/js/app.[contenthash].js
类似下面的路由代码
router/index.js路由相关信息,该路由文件引入了多个.vue组件 importPersonalfrom'@/components/page/Personal' importMessagefrom'@/components/personnal/Message' importSettingsfrom'@/components/personnal/Settings' importSetlanguagefrom'@/components/personnal/children/Setlanguage'
npmrunbuild会打包成一个app.[contenthash].js，这个文件会非常大，影响加载速度。
所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个chunk块中去
分模块打包需要下面这样使用webpack的require.ensure,并且在最后加入一个chunk名,
相同chunk名字的模块将会打包到一起。
constPersonal=r=>require.ensure([],()=>r(require('@/components/page/Personal')),'personal');
constMessage=r=>require.ensure([],()=>r(require('@/components/personnal/Message')),'personal');
constSettings=r=>require.ensure([],()=>r(require('@/components/personnal/Settings')),'personal');
constSetlanguage=r=>require.ensure([],()=>r(require('@/components/personnal/children/Setlanguage')),'personal');
根据chunname的不同,上面的四个组件,将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个(除了app.js,manifest.js,vendor.js)
总结
以上所述是小编给大家介绍的vue-cli首屏加载优化问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！