异步加载组件让我困惑的地方

最近做的一个项目中需要根据相应权限来加载对应的组件,看别人代码(https://www.cnblogs.com/xifengxiaoma/p/9573439.html)有个地方让我很是困惑:

异步加载组件让我困惑的地方_第1张图片

图中函数的作用是根据接口返回的数据来生成routes配置项并且通过addRoutes方法添加到router实例中去,但是在我理解中通过requrie,import这些玩意建立依赖关系并打包成js文件应该是发生在webpack的打包编译阶段啊,然而上面红框中这种写法怎么区分该加载哪些组件。

 

经测试发现:当我把url改成一个固定的路径字符串的时候,打包生成的相关js文件变小了很多,当我在views下面随意添加一个组件的时候,打包生成的相关js文件又变大了。此时我猜想是不是webpack打包编译的时候遇到require参数里面有变量他直接是把变量上一级的固定目录下的所有组件全部给打包了。

暂时就假想成这样,如果有啥不对的还请高手指出来!

 

你可能感兴趣的:(vue,webpack,异步加载)