vite 项目打包优化-基础篇

相较于【vue-cli或webpack】，vite内置了常用配置，无需开发者重写，更多精细优化需自行配置

1、项目打包完运行空白

引用资源路径问题，打包完的【index.html】文件引用其他文件的引用地址不对

参考配置：https://cn.vitejs.dev/config/shared-options.html#base

修改vite.config.js

export default defineConfig({base: './'
})

2、路由模式

路由分为 hash 和 history

• hash：地址携带 # ，正常打包可访问，前端测试开发阶段使用

• history：地址栏会改变，可以使用浏览器的【返回】按钮，需要服务器端的支持，需要【后端或运维】做相关配置，做一下路径重定向问题

3、安装可视化插件

npm install rollup-plugin-visualizer

4、路由懒加载

export const Routes = [{path: '/xxx',component: Xxxx,children: [{// 懒加载写法component: () => import('@/xxx/xxx')}]},...
]

5、压缩文件gzip

需要后端服务支持

npm install vite-plugin-compression

import viteCompression from 'vite-plugin-compression'
import { visualizer } from 'rollup-plugin-visualizer'// 方式一
export default defineConfig({plugins: [// 可视化visualizer({ open: true }),// 打包大文件成gzipviteCompression({verbose: true, //控制台显示结果disable: false, //开启还是禁用threshold: 1024, //体积限制algorithm: 'gzip', //压缩算法etx: '.gz' //文件后缀名}),]
})// 方式二
export default defineConfig(({ command, mode }) => {return {plugins: [viteCompression()...]}
})

参考视频地址：https://www.bilibili.com/video/BV1wt421p7yM?p=12