Vue项目打包优化

在Vue开发过程中，脚手架是一个辅助开发的工具，而真正参与上线的是打包后的源代码。打包的过程包括将多个文件压缩合并成一个文件、进行语法降级以及将Less、Sass、TypeScript等语法解析为CSS等操作。

打包后的源码可以生成一个可直接在浏览器中运行的网页，这就是需要上线的代码。

1. 打包命令

Vue脚手架提供了打包命令，只需直接使用以下命令即可：

yarn build

执行该命令后，会在项目的根目录自动创建一个名为 dist 的文件夹，其中的文件就是打包后的源代码，只需将这些文件放到服务器中即可。

2. 配置publicPath

在项目的配置文件中，可以设置 publicPath ，用于指定获取 .js 和 .css 文件时的相对地址基准。具体配置如下：

module.exports = {
  // 设置获取.js,.css文件时，是以相对地址为基准的。
  // https://cli.vuejs.org/zh/config/#publicpath
  publicPath: './'
}

3. 路由懒加载

路由懒加载和异步组件的使用可以避免一开始就加载所有组件，而是在访问对应的路由时才加载和解析该路由对应的组件。

在打包构建应用时，JavaScript包会变得非常大，影响页面加载速度。如果能将不同路由对应的组件分割成不同的代码块，并在访问路由时才加载对应的组件，将会提高应用的效率。

以下是一个示例：

const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
const MyOrder = () => import('@/views/myorder')

以上示例中，组件在访问对应的路由时才会被加载。

详细的路由懒加载和异步组件的使用可以参考官方文档：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E4%BD%BF%E7%94%A8-webpack