Vite2.0 Pitfalls

This is a supplement to the previous article. It records some problems encountered in the configuration project. I hope it can be helpful to everyone~

Vite project build optimization

Routing dynamic import is built through rollup. The dynamically imported files will generate asynchronous chunk files, which are loaded on demand when we access the project, greatly improving the loading speed of the application.

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: 'Homepage' }
      },
      {
        path: '/about',
        name: 'About',
        meta: { title: 'About', keepAlive: true },
        component: () => import('@/views/about/index.vue')
      },
      {
        path: '/square',
        name: 'Square',
        meta: { title: 'Component Square', 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 is triggered only when the background is forwarded
      } else {
        return { top: 0, behavior: 'smooth' }
      }
    }
  })

router.beforeEach((to, from, next) => {
  // You can do some checks on permissions if (to.path !== from.path) {
    document.title = `Star Music Circle | ${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

The above code is a router file of a Vue project built by Vite, using [email protected]. Vue Router supports dynamic import out of the box, which means you can use dynamic import instead of static import. You can see in the code that both the about page and the square page are dynamically imported.

Regarding dynamic import, MDN has a very detailed introduction: Portal

After the rollup is built, the dynamically imported files will generate asynchronous chunk files, which will be loaded on demand when we access the project, greatly improving the loading speed of the application.

The pitfalls I encountered in the dynamic import of routes in the vite project:

The @/ alias is not supported at build time. During the build, the rollup build cannot find the corresponding file according to the configured alias, so an error will be reported during the build process

Solution:

• At first I thought it was a problem with the reference path, so I tried several reference methods, and finally one of them succeeded! component: () => import('/src/views/about/index.vue') After changing to an absolute path, it can be started normally
• Upgrade the vite version, initially it was [email protected], which does not support aliases. It is supported after upgrading to [email protected]. I guess 2.0 has just been released, so it's understandable that it's not fully written right away.
• Using the import.meta.glob method
  

Some errors and warnings I encountered when configuring

warning: "import.meta" is not available in the configured target environment ("es2019") and will be empty

This warning will appear when the vite configuration item esbuild.target is 'es2019'. Indicates that the import.meta api is not supported in this case

[vite] Internal server error: Invalid glob import syntax: pattern must start with "." or "/" (relative to project root)

The parameter in import.meta.glob() must start with "." or "/" to match relative to the root directory

The final writing code:

  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: 'Homepage' }
        },
        {
          path: '/about',
          name: 'About',
          meta: { title: 'About', keepAlive: true },
          component: modules['/src/views/about/index.vue']
        },
        {
          path: '/square',
          name: 'Square',
          meta: { title: 'Component Square', keepAlive: true },
          component: modules['/src/views/square/index.vue']
        }
      ]
    }
  ]

By using the import.meta.glob method, we can configure routing through the backend interface and control permissions in a controllable manner. If the routes data is returned by the interface, components that are not within the scope of authority will not generate routing items at all, which undoubtedly increases the strength of authority control.

Configure build.rollupOptions.manualChunks to load node_modules files in separate packages

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'
  }
}

If this is not configured, vite will package the node_modules package into a large asynchronous vendor.js file. If the file is too large, this will undoubtedly increase the blocking time when the page is rendered. And it is not conducive to page cache optimization.
In the above configuration, I packaged the UI framework (primeVue) and vue-related packages into one file respectively. In addition to reducing the size of each dependent file, this can also optimize the project's cache. Dependent packages such as these basic libraries are updated less frequently.
Combined with the file cache policy configuration on the server, users need to load these dependent files except for the first time they access the site. They can also read them directly from the cache on subsequent visits. Cutting the dependent file codes can greatly improve the performance of the project.

Moreover, when vite is built, it will automatically generate the following html file

  <!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>My Project</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>

The link tag with the rel="modulepreload" attribute can preload native modules to ensure that some files do not need to wait until execution to load, which can also improve page performance.

Image resource file processing. Assets smaller than the assetsInlineLimit option value will be inlined as base64 data URLs and packaged together with the file that references it. This reduces the number of file requests and improves project performance

other

Place the asynchronous chunks generated by dynamically imported files in corresponding folders, or customize the chunk names.

Hey, after checking the rollup documentation for a long time and trying it myself for a while, I finally succeeded. Refer to the following configuration:

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 configuration passes in global scss variables

The configuration is as follows

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/styles/variables";'
      }
    }
  },
})

It should also be noted that there will be some differences in configuration items between different versions of vite, so when configuring the project, if you still have problems if you configure it completely according to the documentation, you may want to check whether it is caused by the difference between your version and the version in the documentation.

at last

Let me share my configured vite2.0+Vue3.0 project: Portal, a project used to test the waters. If there is anything wrong, please correct me!

This is the end of this article about the vite2.0 pitfalls. For more related vite2.0 pitfalls, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!