vue 组件按需引用，vue-router懒加载，vue打包优化，加载动画
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。
我们要做的就是把路由对应的组件定义成异步组件
[
](javascript:void(0); "复制代码")
<pre style="font-family: "Courier New" !important; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-size: 12px !important;">const Foo = resolve => { // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
// （代码分块）
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}</pre>
](javascript:void(0); "复制代码")
这里还有另一种代码分块的语法，使用 AMD 风格的 require，于是就更简单了：
<pre style="font-family: "Courier New" !important; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-size: 12px !important;">const Foo = resolve => require(['./Foo.vue'], resolve) </pre>
不需要改变任何路由配置，跟之前一样使用 Foo：
<pre style="font-family: "Courier New" !important; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-size: 12px !important;">const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
}) </pre>
把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 给 chunk 命名，提供 require.ensure 第三个参数作为 chunk 的名称:
<pre style="font-family: "Courier New" !important; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-size: 12px !important;">const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')</pre>
Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 require.ensure 的依赖（传空数组就行）。
如果你想在组件加载的时候可以有loading提示也同样的很简单
这里以mint-ui为例
<pre style="font-family: "Courier New" !important; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-size: 12px !important;">import { Indicator } from 'mint-ui'; //前提是npm i mint-ui -S</pre>
然后你就只需要稍微加一点代码
[
](javascript:void(0); "复制代码")
<pre style="font-family: "Courier New" !important; margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-size: 12px !important;">const Foo = resolve => {
Indicator.open();
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
Indicator.close()
})
} //这样就可以实现组件在异步加载的时候显示loading</pre>
](javascript:void(0); "复制代码")
效果如下
