Vue2.5 旅游项目实例28 联调测试上线-异步组件实现按需加载

打包生成的 dist 文件夹包含了：static 文件夹和 index.html 文件。

index.html就是前段代码的入口文件。

static 目录下：

1.首先有一个 css 文件夹，里面包含了一个XXX.css.map 文件，它是帮助我们调试被压缩过的 css 代码，一般在开发做调试的时候使用。真正打包在线上有用的文件是 XXX.css 文件，打包的时候把所以用到的样式打包到了这里。

2.然后有一个 js 文件夹，里面一些 .js.map 的文件，依然是辅助文件，而真正有用的文件有三个：分别是 app.xxx.js 、manifest.xxx.js 、vendor.xxx.js 。

其中 manifest.xxx.js 可以理解为 webpack 打包生生的一个配置文件。可以不关心里面的代码。

vendor.xxx.js 里面放的是各个页面、各个组件公用的一些代码。

app.xxx.js 里面放的是项目各个页面的业务逻辑代码。

而我们说异步组件，主要说的是 app.xxx.js 这部分的内容。

当我们访问项目首页的时候，实际上是不需要列表页的内容，只需要加载首页的内容代码就可以了。但是当你现在以默认的形式打包后，访问首页的时候，app.xxx.js 把首页包括城市列表页、详情页的所有的代码都进行了加载。现在我们的文件比较少，所以看不出什么问题，当我们的项目大，文件多的时候，app.xxx.js 文件就变得越来越大，甚至达到1M以上，这个时候就需要我们通过异步组件来对代码进行优化。

当我们运行服务，浏览器打开 http://localhost:8080/#/ 在开发环境运行代码的时候，发现浏览器 Network 下的 JS 中，只有 app.js ，并没有 manifest 和 vendor。

要实现异步加载：

打开 router 目录下的 index.js 文件，修改代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      // 异步加载
      component: () => import('@/pages/home/Home')
    },
    {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City')
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: () => import('@/pages/detail/Detail')
    }
  ],
  // 每次切换到新路由时，页面滚到顶部
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

保存后，重新刷新页面。

可以看到首页多出了一个js文件：

清空控制台，点击城市列表，发现这时候才加载列表页组件对应的代码：

然后返回首页，可以看到不会加载任何的js文件了，因为首页在一进来的时候已经加载过一次，所以再次访问的时候，直接用的缓存内部的js文件。

再点击详情页，发现会加载详情页组件的代码：

注意：

这样写代码有一个好处，就是我们访问那个页面，只加载这个页面对应的js逻辑，不会加载其他的js逻辑。但是当我们项目的app.js 文件很小的时候，就不需要做这个异步组件加载了。因为做了这个异步拆分后，这个页面加载的代码少了，但是当你访问下一个页面时，会额外的发起一个 http 请求。所以当 app.js 很小的时候，发一个 http 请求的代价，远比首页多加载一个js代码的代价要高。这个情况下，就不建议对 app.js 进行拆分，去用异步组件。只有在 app.js 文件很大的时候，我们才考虑用异步组件，对 app.js 进行拆分。

回到代码中，不仅仅是在路由里可以使用异步组件这种形式，只要是Vue中的组件都可以进行异步的加载。

比如说首页的Header.vue组件，在Home.vue中都是直接使用的，我们也可以把这个组件换成异步组件，修改为：

// import HomeHeader from './components/Header'
export default {
  name: 'Home',
  components: {
    // HomeHeader,
    HomeHeader: () => import('./components/Header'),
  },
}

保存后，回到首页刷新，会发现加载了3个js。

注意：app.js 很小的时候，不建议使用异步组件加载，当项目很大，app.js 至少超过1mb的时候，才使用异步组件加载。

所以对我们这个项目来说，可以恢复到修改前，不适用异步组件加载。

恢复后，记得把完成的代码重新提交下：

git add .
git commit -m "完成项目开发"
git push