Vue 的懒加载

vue开发中，当页面内容比较多的时候，我们希望对有些组件进行懒加载。下面介绍三种方法

• 使用 System.import(url);

components: {
    'yunnex-logistics': () => System.import('./logistics-pages/not-opend.vue')
},
复制代码

这个方法，现在很少用了，以后可能会废除。

• 借助babel-plugin-syntax-dynamic-import 插件，使用 es7 的方法。 import();

  先下载 babel-plugin-syntax-dynamic-import 插件，然后在.babelrc 设置。

{
  "presets": [
    [
      "env", { "modules": false } 
    ]
  ],
  "plugins": ["syntax-dynamic-import"]  // 配置了这个就可以使用 import() 函数。
}
复制代码

在页面就可以这样引入组件

components: {
    yunnexOpenLogistics: () => import('../../components/open-logistics-server.vue')
},
复制代码

• 使用 require

components: {
    yunnexOpenLogistics: resolve => require(['../../components/open-logistics-server.vue'], resolve)
},
或
components: {
    yunnexOpenLogistics: () => require.ensure([], () => require('../../components/open-logistics-server.vue') )
},
复制代码

这个方法，兼容性最好，不用配置 babel。

配置异步组件实现懒加载的问题分析

• 多次调用异步组件，会不会导致浏览器多次请求加载？

  不会的，首次需要组件时，浏览器会去加载，加载完后会缓存起来，供后面用。

• 如果在多个异步加载页面，分别同步与异步加载同一个组件，是否会造成资源重用？

  会的，同步的组件会直接打包进页面，而异步组件会打包进单独的 chunk ; 解决方法就是，需要异步加载的组件，就全部使用异步加载的方式。

转载于:https://juejin.im/post/5abb56a1f265da238b7e107c