vue组件按需加载

原创 uptown 随笔 vue 168阅读 2019-04-16 02:18:25 举报

最近,公司的 SCRM 系统开发临近收尾,在扫尾的时候,发现个别页面加载巨慢,甚至出现卡顿!起初还以为是公共组件的问题,但逐一排查,发现完全没有发现!组件明明做得像德芙一样,哪用都丝般柔滑嘛!

折腾半宿,才想起来,问题该是出在路由上。因为项目上线时间紧,是三人共同开发的,在页面开发前,其中一个同事已经把路由加好了,所谓加好了,是这么个样子:

问题找到了,解决方案,也正是今天想讨论的重点:组件的按需加载

1、vue异步组件技术

vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。
但是,这种情况下一个组件生成一个js文件。
举例如下:

2. (推荐) ES提案的import()

·推荐使用这种方式(需要webpack > 2.4)
·webpack官方文档:webpack中使用import()
·vue官方文档:路由懒加载(使用import())

vue-router配置路由,代码如下:

*敲重点:同一个 webpackChunkName,Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

3. webpack提供的require.ensure()

· vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
举例如下:

参考文章

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复