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

相关推荐
jason_yang10 小时前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
WujieLi2 天前
初识 Vite+:一文了解 Rust 驱动的新一代前端工具链
javascript·rust·vite
却尘3 天前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
萌萌哒草头将军4 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
晓得迷路了4 天前
栗子前端技术周刊第 102 期 - Vite+ 正式发布、React Native 0.82、Nitro v3 alpha 版...
前端·javascript·vite
jason_yang7 天前
vue3中使用auto-import与cdn插件冲突问题
vue.js·vite·cdn
进阶的鱼7 天前
React+ts+vite脚手架搭建(五)【规范篇】
前端·react.js·vite
xiaohe06019 天前
👋 一起写一个基于虚拟模块的密钥管理 Rollup 插件吧(四)
vite·rollup.js
parade岁月10 天前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js
一枚前端小能手10 天前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite