vite2.0 踩坑实录

目录
  • vite项目构建优化
  • 其它
  • 最后

算是对上一篇的补充，记录了一些在配置项目中遇到的问题，希望对大家能有所帮助～

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之间，配置项会存在一些差异，所以在对项目进行配置的时候，如果你完全按照文档进行配置还是有问题，不妨看看是不是自己的版本与文档的版本不一样导致的。

最后

分享一下我配置好了的vite2.0+Vue3.0项目：传送门, 用来试水的项目，如果有什么不对的地方，欢迎指正！

到此这篇关于vite2.0 踩坑实录的文章就介绍到这了,更多相关vite2.0 踩坑内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • 详解vite2.0配置学习(typescript版本)

    详解vite2.0配置学习(typescript版本)

    介绍 尤于溪的原话. vite与 Vue CLI 类似,vite 也是一个提供基本项目脚手架和开发服务器的构建工具. vite基于浏览器原生ES imports的开发服务器.跳过打包这个概念,服务端按需编译返回. vite速度比webpack快10+倍,支持热跟新, 但是出于处于测试阶段. 配置文件也支持热跟新!!! 创建 执行npm init @vitejs/app ,我这里选择的是vue-ts 版本 "vite": "^2.0.0-beta.48" alias别

  • vite2.0 踩坑实录

    目录 vite项目构建优化 其它 最后 算是对上一篇的补充,记录了一些在配置项目中遇到的问题,希望对大家能有所帮助- vite项目构建优化 路由动态导入 经过rollup的构建,动态导入的文件将会生成异步的chunk文件,在我们访问项目的时候按需加载,极大的提升应用的加载速度 import Home from '@/views/home/index.vue' import Layout from '@/components/Layout.vue' const routes: Array<Rout

  • python3.6中anaconda安装sklearn踩坑实录

    首先我是用pycharm完成的,要确定命令行和界面里是同一个环境. 如果不确定可以设置再add在新增加的环境里看现在是哪个环境,只要选择已有的环境,虽然project interpreter里面好像新增了个(2),但是包可以直接移植过来. 然后可以检查一下自己现在的Python版本和conda版本和解释器里的一样不. conda是在终端输入,conda info -e,第一个星号就是自己的版本. Python是在Python终端里面输入,import sys和sys.executable查看当前

  • Redis中Scan命令的踩坑实录

    1.原本以为自己对redis命令还蛮熟悉的,各种数据模型各种基于redis的骚操作.但是最近在使用redis的scan的命令式却踩了一个坑,顿时发觉自己原来对redis的游标理解的很有限.所以记录下这个踩坑的过程,背景如下: 公司因为redis服务器内存吃紧,需要删除一些无用的没有设置过期时间的key.大概有500多w的key.虽然key的数目听起来挺吓人.但是自己玩redis也有年头了,这种事还不是手到擒来? 当时想了下,具体方案是通过lua脚本来过滤出500w的key.然后进行删除动作.lu

  • iOS13 适配和Xcode11.0踩坑小结

    iOS13中presentViewController的问题 更新了Xcode11.0 beta之后,在iOS13中运行代码发现presentViewController和之前弹出的样式不一样. 会出现这种情况是主要是因为我们之前对UIViewController里面的一个属性,即modalPresentationStyle(该属性是控制器在模态视图时将要使用的样式)没有设置需要的类型.在iOS13中modalPresentationStyle的默认改为UIModalPresentationAu

  • angular异步验证防抖踩坑实录

    angular异步验证防抖踩坑实录

    前言 本周的一个需求是在一个异步验证上加上防抖,防抖,以前也接触过,依稀记得不难,就没再去看angluar的官方文档,直接就开始google写了,然后--一不小心就掉坑里了. 突然没了效果的验证功能 在网上一番查询以后,选了一个最简单,最符合的实现 一番修改以后我的代码成了下面这样 public oldPasswordValidator(): AsyncValidatorFn { return (ctrl: AbstractControl): Promise<ValidationErrors |

  • java学习之JasperReport踩坑

    java学习之JasperReport踩坑

    下面进入正题,来介绍下今天的猪脚JasperReport或者叫它ireport亦或jasperstudio,当然后面两个是它的可视化工具. JasperReport是个什么东西? 这货其实在国内用户也不少,是个国外的产品,而且可以说在JAVA报表领域应用是相当的广泛. 我当初刚刚接触这个报表的时候还是相当的喜欢的,最主要的是它的可视化工具,真的是让我欲罢不能,竟然可以通过简单画图的方式来设计JAVA报表.说起画图就是可以通过可视化的工具,让我们可视化的设计报表模板,并且它支持输出的文件格式很广泛

  • Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)

    终于构建出了第一个神经网络,Keras真的很方便. 之前不知道Keras这么方便,在构建神经网络的过程中绕了很多弯路,最开始学的TensorFlow,后来才知道Keras. TensorFlow和Keras的关系,就像c语言和python的关系,所以Keras是真的好用. 搞不清楚数据的标准化和归一化的关系,想对原始数据做归一化,却误把数据做了标准化,导致用model.predict预测出来的值全是0.0,在网上搜了好久但是没搜到答案,后来自己又把程序读了一遍,突然灵光一现好像是数据归一化出了问

  • MySQL8.0升级的踩坑历险记

    目录 前言 1.先彻底卸载现有版本MySQL. 2.下载deb并按照MySQL8.x. 3.创建用户和配置权限. 总结 前言 最近忙于Fighting的项目,所以笔耕有些松懈,实为不该. 刚好遇到需要从MySQL5.7.33升级到MySQL8.0.x的需求,于是记录一下整个升级过程,踩坑而过. 背景梗概:本地docker容器中使用的MySQL是5.7.33(镜像系统用的是ubuntu16.04),而新项目在线上使用了MySQL8.0.从线上导出的sql文件(表结构+数据)中有一种低版本MySQL

  • vue3+ts+vite2项目实战踩坑记录

    vue3+ts+vite2项目实战踩坑记录

    目录 1.Vite创建vue3项目 2.配置别名alias 3.引入element-plus 4.glob全局导入 5.静态资源导入 总结: 1.Vite创建vue3项目 使用 NPM: npm init @vitejs/app 使用 Yarn: yarn create @vitejs/app 一个命令快速安装vite+ts+vue3项目: npm init @vitejs/app vite-app --template vue-ts 默认构建好的目录结构是不包含router和vuex的需要手动

  • Storybook 7.0 Beta Vue3踩坑解决记录

    目录 故事背景 坑一: 坑二: 坑三: 总结 故事背景 基于 Vue + Vite + TS 结合 pnpm 的一个 monorepo 项目的组件库文档编写,起初个人是比较倾向于直接使用全家桶系列的 VitePress.无奈公司中其他库文档均使用 Storybook,并且已经升级到最新版本. 好吧,到这里就基本知道了自己要做什么了. 由于之前也没有接触过这个玩意儿,就去看着官网一步步操作去了.坑也就在这里了,谁知道版本上去了,文档却没有做出相应的调整.然后就有了后续一系列的问题.Storyboo

随机推荐