在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
算是对上一篇的补充,记录了一些在配置项目中遇到的问题,希望对大家能有所帮助~ 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文件,使用的[email protected],Vue Router支持开箱即用的动态导入,这意味着你可以用动态导入代替静态导入.在代码中可以看到:about页和square页都是动态导入的。 关于动态导入,MDN上有非常详细的介绍:传送门 经过rollup的构建,动态导入的文件将会生成异步的chunk文件,在我们访问项目的时候按需加载,极大的提升应用的加载速度。 在vite项目中的路由动态导入中我踩的坑: 构建时不支持@/别名。在构建的时候,rollup构建时并不能按照配置的别名找到对应的文件,因此在构建环节会有报错 解决方案:
我配置使遇到的一些报错和警告
当vite配置项esbuild.target 为 ‘es2019‘的时候,会有这个警告。表示这个情况下不支持使用import.meta api
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文件, 如果文件过大,这无疑增加了页面渲染时的阻塞时长。而且不利于页面缓存优化。 而且,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之间,配置项会存在一些差异,所以在对项目进行配置的时候,如果你完全按照文档进行配置还是有问题,不妨看看是不是自己的版本与文档的版本不一样导致的。 最后
|
请发表评论