这篇文章主要介绍了vite项目构建优化的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
路由动态导入 经过rollup的构建，动态导入的文件将会生成异步的chunk文件，在我们访问项目的时候按需加载，极大的提升应用的加载速度
import Home from '@/views/home/index.vue'
import Layout from '@/components/Layout.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: Layout,
redirect: '/home',
children: [
{
path: '/home',
name: 'Home',
component: Home,
meta: { title: '首页' }
},
{
path: '/about',
name: 'About',
meta: { title: '关于', keepAlive: true },
component: () => import('@/views/about/index.vue')
},
{
path: '/square',
name: 'Square',
meta: { title: '组件广场', keepAlive: true },
component: () => import('@/views/square/index.vue')
}
]
}
]
const router = createRouter({
history: process.env.NODE_ENV === 'development'
? createWebHistory(process.env.BASE_URL)
: createWebHashHistory(process.env.BASE_URL),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
// 通过前进后台时才触发
return savedPosition
} else {
return { top: 0, behavior: 'smooth' }
}
}
})
router.beforeEach((to, from, next) => {
// 可以对权限进行一些校验
if (to.path !== from.path) {
document.title = `星乐圈 | ${to.meta.title}`
}
next()
})
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g
const isChunkLoadFailed = error.message.match(pattern)
if (isChunkLoadFailed) {
location.reload()
}
})
export default router上述代码，是一个vite构建的vue项目的router文件，使用的vue-router@4.0.6,Vue Router支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入.在代码中可以看到：about页和square页都是动态导入的。
关于动态导入，MDN上有非常详细的介绍:传送门
经过rollup的构建，动态导入的文件将会生成异步的chunk文件，在我们访问项目的时候按需加载，极大的提升应用的加载速度。
在vite项目中的路由动态导入中我踩的坑：
构建时不支持@/别名。在构建的时候，rollup构建时并不能按照配置的别名找到对应的文件，因此在构建环节会有报错
解决方案：
一开始感觉是引用路径的问题，所以尝试了几种引用方式,然后终于有一种成功了！component: () => import('/src/views/about/index.vue') 改成绝对路径以后，就可以正常启动
升级vite版本，一开始是vite@2.0.0-beta.35，不支持别名。在升级到vite@2.3.8之后就支持了。估计是2.0刚出，一下子没有写完善也是可以理解滴～
使用import.meta.glob方法
我配置使遇到的一些报错和警告
warning: "import.meta" is not available in the configured target environment ("es2019") and will be empty
当vite配置项esbuild.target 为 ‘es2019‘的时候，会有这个警告。表示这个情况下不支持使用import.meta api
[vite] Internal server error: Invalid glob import syntax: pattern must start with "." or "/" (relative to project root)
import.meta.glob() 中的参数必须以"." 或 "/" 开头，相对根目录进行匹配
最终的写法部分代码：
import Layout from '@/components/Layout.vue'
const modules = import.meta.glob('/src/views/*/index.vue')
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: Layout,
redirect: '/home',
children: [
{
path: '/home',
name: 'Home',
component: modules['/src/views/home/index.vue'],
meta: { title: '首页' }
},
{
path: '/about',
name: 'About',
meta: { title: '关于', keepAlive: true },
component: modules['/src/views/about/index.vue']
},
{
path: '/square',
name: 'Square',
meta: { title: '组件广场', keepAlive: true },
component: modules['/src/views/square/index.vue']
}
]
}
]通过使用import.meta.glob 方法，我们可以通过后台接口来配置路由，可控的进行权限控制。routes数据如果由接口返回，则不在权限范围内的组件根本不会生成路由项，这无疑增加了权限控制的力度。
配置build.rollupOptions.manualChunks，对node_modules文件进行分包加载
manualChunks(id) {
if (id.includes('node_modules') && id.includes('prime')) {
return 'prime'
} else if (id.includes('node_modules') && id.includes('vue')) {
return 'vue'
} else if (id.includes('node_modules')) {
return 'vendor'
}
}如果不配置这项，vite会将node_modules包打包成一个大的异步vendor.js文件, 如果文件过大，这无疑增加了页面渲染时的阻塞时长。而且不利于页面缓存优化。
在上面的配置中，我将ui框架（primeVue）、vue相关的包分别打包成一个文件，这样做除了可以减少每个依赖文件的体积之外，还可以对项目的缓存进行优化。这些基础库之类的依赖包，更新的次数会比较少。
结合服务端的文件缓存策略配置，用户除了首次访问时需要加载这些依赖文件，后面再访问，都可以直接从缓存读取。将依赖文件代码进行一定的切割，可以极大的提升项目的性能。
而且，vite在构建的时候，会自动生成如下html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" rel="external nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>我的项目</title> <script type="module" crossorigin src="/assets/index.e3627129.js"></script> <link rel="modulepreload" href="/js/vue/vue.a1ee204f.js" rel="external nofollow" > <link rel="modulepreload" href="/js/prime/prime.eb4bfea6.js" rel="external nofollow" > <link rel="stylesheet" href="/assets/prime.296674d4.css" rel="external nofollow" > <link rel="stylesheet" href="/assets/index.289426b3.css" rel="external nofollow" > </head> <body> <div id="app"></div> </body> </html>
其中加了rel="modulepreload"属性的link标签，可以预加载原生模块，保证某些文件可以不必等到执行时才加载，同样可以提升页面的性能
图片资源文件处理。资源体积小于 assetsInlineLimit 选项值 则会被内联为 base64 data URL，一起被打包至引用它的文件中。以此减少对文件的请求次数，提升项目性能
给动态导入文件生成的异步chunk，放置相对应的文件夹中，或者自定义给chunk命名。
嘿嘿，查了rollup文档很久，又自己试了好一会儿，终于成功了。参考如下配置：
export default defineConfig({
build: {
assetsDir: 'assets',
rollupOptions: {
output: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
chunkFileNames: (chunkInfo: any) => {
const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
return `js/${fileName}/[name].[hash].js`
},
}
}
}
})vite配置传入全局的scss变量
配置如下
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/styles/variables";'
}
}
},
})还需要注意的是，不同版本的vite之间，配置项会存在一些差异，所以在对项目进行配置的时候，如果你完全按照文档进行配置还是有问题，不妨看看是不是自己的版本与文档的版本不一样导致的。
感谢你能够认真阅读完这篇文章，希望小编分享的“vite项目构建优化的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
