路由懒加载

    结合 Vue 的异步组件和 Webpack 的，轻松实现路由组件的懒加载。如：

    当你觉得你的页面热更新速度慢的时候，才需要往下看 ↓

    当你的项目页面越来越多之后，在开发环境之中使用 会变得不太合适，每次更改代码触发热更新都会变得非常的慢。所以建议只在生产环境之中使用路由懒加载功能。

    开发环境：

    1. module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

    这里注意一下该写法只支持 vue-loader at least v13.0.0+理由 vue-element-admin/issues/231

    当然这样写会有一些副作用。由于

    @/views/下的 .vue 文件都会被打包。不管你是否被依赖。所以这样就产生了一个副作用，就是会多打包一些可能永远都用不到 js 代码。当然这只会增加 dist 文件的大小，但不会对线上代码产生任何的副作用。

    TIP

    用户自己可以根据业务情况来衡量一下是否采用本方案，如果你的项目页面不超过几十个，本地开发热更新速度你还能接受的话，可以直接所有环境下都是用懒加载避免此副作用。

    使用babel 的 plugins babel-plugin-dynamic-import-node。它只做一件事就是将所有的import()转化为，这样就可以用这个插件将所有异步组件都用同步的方式引入，并结合 这个babel环境变量，让它只作用于开发环境下，在开发环境中将所有import()转化为require()，这种方案解决了之前重复打包的问题，同时对代码的侵入性也很小，你平时写路由的时候只需要按照官方文档路由懒加载的方式就可以了，其它的都交给bable来处理，当你不想用这个方案的时候，也只要将它从babel 的 plugins中移除就可以了。

    首先在中增加BABEL_ENV

      接着在.babelrc只能加入babel-plugin-dynamic-import-node这个plugins，并让它只有在development模式中才生效。

      之后就大功告成了，路由只要像平时一样写就可以了。

      webpack4 已经出了，大幅提高了打包和编译速度，之后可能完全不需要搞这么复杂了。再多的页面热更新都能很快，完全就不需要前面提到的解决方案了。