以下三种方法，一和二在本质上是一个东西，只不过是 MODULE_ 语法和 _COMMONJS 语法的区别。三是在二的低版本。

零、如果你使用vue-cli 4

一定记得去掉 prefetch 插件!!

  • 根据 vue-cli 官方的解释：

    默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。 这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除。

  • 但实际使用下来，被标明 prefetch 的资源也一定堵塞当前文件其余资源（本页面css、图片）的加载，并没有「pre」

一、() => import

1. 例子

  1. {
  2.     path: '/Home',
  3.     name: 'Home',
  4.     component: () => import('@/components/Home/Home', 'com-Home'),
  5.     beforeEnter(to, from, next) {
  6.         next()
  7.     },
  8. }

2. 语法特性

参考：异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
一个推荐的做法是将异步组件和 > webpack 的 code-splitting 功能> 一起配合使用。

二、resolve => require([], resolve)

1. 例子

  1. {
  2.     path: '/Home',
  3.     name: 'Home',
  4.     component: resolve => require(['@/components/Home/Home'], resolve),
  5.     beforeEnter(to, from, next) {
  6.         next()
  7.     },
  8. }

2. 语法特性

  • 参考同一
  • 这个特殊的 require 语法将会告诉 webpack自动将你的构建代码切割成多个包，这些包会通过 Ajax 请求加载。

_

三、require.ensure() 配合 require()

1. 例子

  1. {
  2.     path: '/Home',
  3.     name: 'Home',
  4.     component: require.ensure([], () => r(require('@/components/Home/Home')), 'com-home',
  5.     beforeEnter(to, from, next) {
  6.         next()
  7.     },
  8. }

2. 语法特性

  • webpack 2.2 开始支持，webpack 4 去除了 CommonsChunkPlugin ，使用 SplitChunksPlugin 替代，因此在 webpack4 的环境下，这种写法与二除了可以命名以外没有区别。
  • 当使用 CommonJS 模块语法的时候，这是唯一实现动态加载的方法。
  • 这个功能依赖于 Promise，如果想要支持更老的浏览器，那么记得使用类似于 es6-promise 或者 promise-polyfill 的polyfill。

3. 作用

webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

4. 语法

  1. require.ensure(
  2.   dependencies: String[],
  3.   callback: function(require),
  4.   errorCallback: function(error),
  5.   chunkName: String
  6. )
  • 依赖 dependencies
    • 这是一个字符串数组，通过这个参数，在所有的回调函数的代码被执行前，我们可以将所有需要用到的模块进行声明。
  • 回调 callback
    • 当所有的依赖都加载完成后，webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此，我们可以进一步 require() 依赖和其它模块提供下一步的执行。
  • chunk名称 chunkName
    • chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。

5. 注意点

  • callback 传入参数的变量命名，一定要是require，不然无法通过 webpack 静态解析器的处理。