页面加载的两个方法（路由懒加载/用js控制添加script）

路由懒加载

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

结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。

我们要做的就是把路由对应的组件定义成异步组件：

const Foo = resolve => {
  // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
  // （代码分块）
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}

这里还有另一种代码分块的语法，使用 AMD 风格的 require，于是就更简单了：

const Foo = resolve => require(['./Foo.vue'], resolve)

不需要改变任何路由配置，跟之前一样使用 Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

 

用js控制添加script

王烨的有些功能是一开始渲染的并不需要的，例如百度地图，百度地图是用户点击了才弹出来的，也就是说，这个功能是可选的。那么解决方案就来了，能不能在用户点击的时候，我在去下载百度地图的js.当然可以。那如何实现用户点击的时候再去下载百度地图的js呢？于是，我们可以写一个按钮的监听器

mapBtn.click(function() {
  //获取 文档head对象
  var head = document.getElementsByTagName('head')[0];
  //构建 <script>
  var script = document.createElement('script');
  //设置src属性
  script.async = true;
  script.src = "http://map.baidu.com/.js"
  //加入到head对象中
  head.appendChild(script);
})