Vue 2 项目打包优化

脚手架: Vue CLI

vue脚手架只是开发过程中，协助开发的工具，当真正开发完了 => 脚手架不参与上线

参与上线的是 => 打包后的源代码

打包：

- 将多个文件压缩合并成一个文件

- 语法降级

- less sass ts 语法解析, 解析成css

- ....

打包后，可以生成，浏览器能够直接运行的网页 => 就是需要上线的源码！

1. 打包命令

vue脚手架工具已经提供了打包命令，直接使用即可。

- yarn build

在项目的根目录会自动创建一个文件夹`dist`,dist中的文件就是打包后的文件，只需要放到服务器中即可。

2. 配置publicPath -->默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径

在vue.config.js文件配置

module.exports = {

  // 设置获取.js,.css文件时，是以相对地址为基准的。

  // https://cli.vuejs.org/zh/config/#publicpath

  publicPath: './

}

3. 路由懒加载

路由懒加载 & 异步组件， 不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件

官网链接：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E4%BD%BF%E7%94%A8-webpack

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

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