vue-router路由懒加载的使用

Vue 为什么需要懒加载（按需加载）？

 

Vue 的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。

 

因为Vue 是SPA，所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源，造成网站首页打开速度变慢的问题，降低用户体验。

所以为了解决上面问题，我们需要对Vue实现组件懒加载（按需加载）。

以往，我们配置vue-router是这样的

接下来，实现子组件懒加载，则改动如下：

使用ES中的import进行懒加载  (推荐使用，也是最常用的)

使用VUE中的异步组件进行懒加载

除了ES6 的import()这个方法，webpack本身还提供了另一个方法—— require.ensure()