路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应 组件，这样就更加高效了。

结合Vue 的异步组件 (opens new window)和 Webpack 的代码分割功能 (opens new window)，轻松实现路由组件的懒加载。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

import('./Foo.vue') // 返回 Promise

注意

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import (opens new window) 插件， 才能使 Babel 可以正确地解析语法。

结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import('./Foo.vue')

使用变量

有时候路由信息需要从后台接口获取，那么路由组件的路径将会成为一个变量，就像下面的写法

// 路由动态懒加载
export const loadView = (view) => {
  return () => import(`@/${view}`)
}

import中的@是在vue.config.js中配置的路径别名，可以将相对路径变为绝对路径，这样可以更好的维护路由组件的路径

chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
      .set('_conf', resolve('./src/config'))
}

问题来了

问题1：ESLint报错

使用lintOnSave: false关闭ESLint检查，暂时无视该错误提示

问题2：页面无法加载路由

npm run dev时警告⚠️ 打开页面提示无法记载路由

解决方案

将上面的动态懒加载路由代码修改一下，即可解决上述问题

export const loadView = (view) => { // 路由懒加载
  return () => Promise.resolve(require(`@/${view}`).default)
}

新的问题又来了

写成上面的写法之后，生产环境IE又无法访问了，显示js文件中存在=>符号，但是开发环境一切正常。

终极解决方案

最终使用下面的引入方式解决

export const loadView = (view) => { // 路由懒加载
  return (resolve) => require([`@/${view}`], resolve)
}

罪魁祸首是，Webpack4中的动态import不支持变量方式，导致动态路由失效

2020年12月27日更新

又出现了新的问题😓，使用终极解决方案会导致生产环境样式错乱（还不知道是什么原因导致），最后采取了一个折中的方案。

// 路由懒加载
export const loadView = (view) => {
  if (process.env.NODE_ENV === 'production') {
    return () => import(`@/${view}`);
  } else {
    return (resolve) => require([`@/${view}`], resolve)
  }
}