关于vue 动态引入（异步加载import和require）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度

前言：

最近在改造vue-cli 2.x + webpack2.x的项目时，由于之前路由是静态的，没有根据菜单权限动态生成前端路由。所以想对此进行改造，然后碰到了一些问题和坑，现在总结一下，避免以后继续踩坑。

先来说一下vue项目，组件懒加载的几种方式。

1. require（AMD规范）

{
    path: '/demo',
    name: 'Demo',
    component: resolve => require(['../components/Demo/index'], resolve)
}
            

这种方法可以实现按需懒加载，并且一个组件会打包成一个js文件.

但是这里有一个坑，如果你的组件是在Demo目录下的index.vue组件，你的组件路径必须精确到/index, 如果只是到demo，是会找不到对应的组件的。

这种方式有个弊端， 就是不能指定某几个组件打包到同一个js里。

2. import (ES6提案推荐)

{
    name: Demo,
    path: /demo,
    component: () => import(`@/views/${url}`)
}

这种方法可以实现按需懒加载，并且一个组件会打包成一个js文件。也可以加上/* webpackChunkName: "[name]" */， 将不同组件打包到同一个js文件中，如：

() => import(/* webpackChunkName: "[name]" */ `@/views${url}`)

[name]就是要指定的分类的名字

这里也有一个坑，如果你项目用的是webpack2.x的版本，那么import里面是不能带参数的，比如上面那个例子，组件是引入失败的。

 官方解释： 大致意思说说传的变量有可能和系统某个其他文件或者路径重名，所以import的路径必须要尽量详细点。但是到底要多详细，你可以自己去试，所以我直接放弃了。

报错：Cannot find module "."
    at webpackMissingModule......

webpack2.x的版本还有别的问题，用import且带参数的时候，编译会报警告：

Critical dependency: the request of a dependency is an expression

老版本的webpack只能是纯字符串的路径引入。但是也有小伙伴说路径多加几个层级就能带参数，但是我试过只加一层@/pages/， 是不行的。一般我们的组件路径也不会有很多层，所以我放弃了import，直接用了require的方式。

当然，如果你确实想用import，那就把webpack升级到4.x的版本，4.x的版本不存在这个问题。

但是webpack2.x升级到webpakc4.x，在vue中又需要更改一系列的配置，估计还得踩一部分坑。

3. require.ensure

webpack2.x的版本还能用require.ensure方式加载，如下：

{
    name: 'Demo',
    path：'/demo'
    component: r => require.ensure([], () => r(require(`@/views${url}/index`)),             
    'index')
}

require.ensure（）接受三个参数： 第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖; 。第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的WebPack就无法静态分析的时候处理它; 第三个参数chunkName则是指定打包的组块名称。

但是chunkName不能是参数，只能是string.

4. 关于plugin-syntax-dynamic-import

如果用了import语法，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。不过，这个插件不需要单独安装，因为：

 所以这也是为什么我们在babel的配置文件里需要配置@babel/preset-env的原因

 或者：

5. 关于babel-plugin-dynamic-import-node

上面是官方解释： 也就是将import方法转成require()，且是动态的。

运用这个插件能在代码使用了import语法的情况下，大大提高代码的编译速度。

配置：

vue.cli2.x 

.babelrc文件中，

 "env": {
    "test": {
      "plugins": []
    },
    "development":{
      "presets": ["env", "stage-2"],
      "plugins": ["dynamic-import-node"]
    }
  }

babel.config文件中，

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    'env': {
        'development': {
          'plugins': ['dynamic-import-node']
        }
    }
}

6. 关于router.addRoutes

vue 提供了动态添加路由的方法。

关于vue router, 我们知道正常我们定义静态路由都是在new Router的时候就把所有的路由都定义好，这样在new Vue()的时候，把提前实例化的router对象传进去就可以了，这就是常规的定义静态路由的方法。

但是很多情况，我们的路由都是需要根据权限动态生成的，所以需要动态添加路由。

也正是因为需要动态生成路由，所以我们才会碰到前面一系列懒加载组件导致的问题。因为静态路由的时候，引入组件基本都是固定路径，不涉及到传参数的问题。

所以，我们用前面懒加载组件，构造一个组件对应的路由信息，最终把构造好的路由，动态添加到vue router中。

但是这里也需要注意几点：

1：addRouter方法添加的router就像是Vuex里的缓存一样，并不是添加过了就会一直都在，只要页面刷新了， 添加的router就没了，需要重新添加，这个很好理解，因为静态路由也是这样，每次刷新了页面，静态路由也需要重新构造。

所以，我们一般会在路由钩子里动态添加路由，保证刷新之后的路由会重新添加。

具体做法当然是在router.beforeEach中，执行router.addRouer()。

不过一般需要做个判断，不是每次访问新的路由都需要重新添加路由，否则会重复添加路由，也会出问题。

2：addRouter方法执行之后，router.options.routes是找不到你动态添加的路由的，如果需要更新，必须手动将动态添加的路由push进去。此时，router.options.routes才可以用来构建菜单导航。

最后，附上 一篇详细的踩坑笔记：

详细记录前端项目使用import懒加载组件打包失败的踩坑之路