Vue系列vue-router的项目打包（三）

前言

项目生产上线，打包必不可少，那么我们就来看一下Vue是如何项目打包的。

一、打包命令

npm run build

打包成功之后会给我们生成一个dist文件夹，里面有css、js等相关的代码分层打包。

打包出来的js简单说明：

二、路由赖加载

官方：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

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

怎么写呢？我们根据ES6最新语法，重新编写index.js路由配置。

然后我们重新执行命令，重新打包。

npm run build

此时多了四个js文件，四个组件都使用了赖加载，每个赖加载对应一个js文件。

三、总结

为什么要使用路由的赖加载呢？

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