阅读 3371
vite2.0 踩坑实录

vite2.0 踩坑实录

vite2.0 踩坑实录

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

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构建时并不能按照配置的别名找到对应的文件,因此在构建环节会有报错

    解决方案:

    1. 一开始感觉是引用路径的问题,所以尝试了几种引用方式,然后终于有一种成功了!component: () => import('/src/views/about/index.vue') 改成绝对路径以后,就可以正常启动

    2. 升级vite版本,一开始是vite@2.0.0-beta.35,不支持别名。在升级到vite@2.3.8之后就支持了。估计是2.0刚出,一下子没有写完善也是可以理解滴~

    3. 使用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" />
          <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">
        <link rel="modulepreload" href="/js/prime/prime.eb4bfea6.js">
        <link rel="stylesheet" href="/assets/prime.296674d4.css">
        <link rel="stylesheet" href="/assets/index.289426b3.css">
      </head>
        <body>
          <div id="app"></div>
          
        </body>
      </html>
    复制代码

    其中加了rel="modulepreload"属性的link标签,可以预加载原生模块,保证某些文件可以不必等到执行时才加载,同样可以提升页面的性能

  • 图片资源文件处理。资源体积小于 assetsInlineLimit 选项值 则会被内联为 base64 data URL,一起被打包至引用它的文件中。以此减少对文件的请求次数,提升项目性能

其它

  1. 给动态导入文件生成的异步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`
        },
      }
    }
  }
})
复制代码
  1. vite配置传入全局的scss变量

    配置如下

    export default defineConfig({
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: '@import "./src/styles/variables";'
          }
        }
      },
    })
    复制代码
  2. 还需要注意的是,不同版本的vite之间,配置项会存在一些差异,所以在对项目进行配置的时候,如果你完全按照文档进行配置还是有问题,不妨看看是不是自己的版本与文档的版本不一样导致的。

最后

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

感谢阅读 mua~

文章分类
前端
文章标签