vite 项目打包优化-基础篇

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

1、项目打包完运行空白

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

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

修改vite.config.js

js 复制代码
export default defineConfig({
  base: './'
})
2、路由模式

路由分为 hashhistory

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

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

3、安装可视化插件
npm install rollup-plugin-visualizer
4、路由懒加载
js 复制代码
export const Routes = [
    {
        path: '/xxx',
        component: Xxxx,
        children: [
            {
                // 懒加载写法
            	component: () => import('@/xxx/xxx')
            }
        ]
    },
    ...
]
5、压缩文件gzip

需要后端服务支持

npm install vite-plugin-compression
js 复制代码
import viteCompression from 'vite-plugin-compression'
import { visualizer } from 'rollup-plugin-visualizer'

// 方式一
export default defineConfig({
    plugins: [
        // 可视化
        visualizer({ open: true }),
        // 打包大文件成gzip
        viteCompression({
            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

相关推荐
王解2 天前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
景天科技苑3 天前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
niech_cn5 天前
vite + vue3 + ts解决别名引用@/api/user报错找不到相应的模块
vite
Amd7947 天前
Nuxt.js 应用中的 vite:compiled 事件钩子
自定义·vite·编译·nuxt·热更新·性能·钩子
黑色的糖果7 天前
npm上传自己封装的插件(vue+vite)
前端·vue.js·npm·vite
软件小伟7 天前
Vite是什么?Vite如何使用?相比于Vue CLI的区别是什么?(一篇文章帮你搞定!)
前端·vue.js·ecmascript·vite·vue vli
Amd7948 天前
Nuxt.js 应用中的 vite:serverCreated 事件钩子
中间件·开发·vite·日志·nuxt·跨域·钩子
亦世凡华、8 天前
React--》如何高效管理前端环境变量:开发与生产环境配置详解
react·vite·环境变量·env·env配置
19组清风8 天前
对于模块动态加载,Vite 内部做了哪些优化
前端·vite·前端工程化
Amd7949 天前
Nuxt.js 应用中的 vite:configResolved 事件钩子
vite·配置·nuxt·构建·钩子·动态·调整