老娘忍着姨妈带来的剧烈疼痛（就差冲动请假回去休息了），半死似的在工位上跟着别人搭建好的框架开始学习，然而又被一句短短的语句绊住了手脚，大致代码如下：
export default new Router({ // mode: 'history', //后端支持可开 scrollBehavior: () => ({ y: 0 }), routes: [ { path: '/login', component: () => import('@/views/login/index'), hidden: true }] })
???what ???why
没错就是这句import,搜索我仅有的记忆，vue中并不是这样来引入组件的，这样写对么？为什么？
我看完VUE有关router文档没找到，我又看了一遍还是没找到，我又去看import用法没有推出来，于是我去网上冲浪，终于让我看到了一个解释：
“当你需要懒加载 lazy-loading 的时候，需要一个个把routes的component改为() => import('@/views/login.vue')”
嗯，那到底什么是路由懒加载呢？
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合 Vue 的[异步组件]和 Webpack 的[代码分割功能]，轻松实现路由组件的懒加载。
const Foo = () => import('./Foo.vue')
其实根本原因就是因为import静态加载模块（在编译时就能完成模块加载）
当当当，终于解释完了，然后解决方案呢，有两个，
一.直接的解决方案便是：区分开发与生产环境 （原因所在）
具体实现
开发环境：
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
使用时注意代码注释！！！
生产环境：
module.exports = file => () => import('@/views/' + file + '.vue')
副作用：@/views/下的 .vue 文件都会被打包。不管你是否被依赖。所以这样就产生了一个副作用，就是会多打包一些可能永远都用不到js代码。当然这只会增加 dist 文件的大小，但不会对线上代码产生任何的副作用。
TIP
用户自己可以根据业务情况来衡量一下是否采用本方案，如果你的项目页面不超过几十个，本地开发热更新速度你还能接受的话，可以直接所有环境下都是用懒加载避免此副作用。
方案二:
使用babel 的 plugins[babel-plugin-dynamic-import-node]它只做一件事就是将所有的import()转化为require()，这样就可以用这个插件将所有异步组件都用同步的方式引入，并结合 [BABEL_ENV]这个bebel环境变量，让它只作用于开发环境下，在开发环境中将所有import()转化为require()，这种方案解决了之前重复打包的问题，同时对代码的侵入性也很小。
具体代码：
首先在package.json中增加BABEL_ENV
"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
接着在.babelrc只能加入babel-plugin-dynamic-import-node这个plugins，并让它只有在development模式中才生效。
{ "env": { "development":{ "plugins": ["dynamic-import-node"] } } }
之后就大功告成了，路由只要像平时一样写就可以了。
{ path: '/login', component: () => import('@/views/login/index')}
网友评论