Multi-level lazy loading routing will lead to multiple loading of styles and reloading of pages.

[rennzhang]

Please forgive me for using Google Translate

problem description：

When I entered a new routing page (using a lazy loading situation, the following way to write):

Will load all the style files that use the components under the current routing page, resulting in Vite Reload, such as:

In my actual project, there may be some design unreasonable, there are too many routing levels, which will cause the Vite will reload multiple times when I entered the new page, introduced all the styles to enter the page, which affects the development experience.

I don't know if it was designed that way, but it does affect the development experience a little bit, and it feels like it slows down development with Vite

solution

I introduced the style directly in the development environment, and then introduced as needed when packaged:

main.js:

(() => import.meta.env.DEV && import("ant-design-vue/dist/antd.css"))();

vite.config.ts：

export default ({ mode }) => {
  const isDev = mode == "development";
  return defineConfig({
    plugins: [
      vue(),
      Components({
        resolvers: [
          AntDesignVueResolver({
            // importStyle: "css",
            importStyle: isDev ? false : "less",
          }),
        ],
        dirs: ["src/components"],
        include: [/\.vue$/],
      }),
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
  });
};

I am thinking about implementing such functions inside the plugin and configured by options?

Rely version

• "vue": "^3.2.22"
• "unplugin-vue-components": "^0.17.6"
• "vite": "^2.6.14"

[PiscineMolitorPatel]

我也出现了这个问题，我的路由也是异步加载的配置，由于我的routes也是动态获取再进行注册的，所以我用了 vite 提供的 import.meta.glob 导入了所有路由页面然后再做匹配，比你更糟糕的是我会出现页面的无限重载，甚至vite开启的服务抛出了408的错误，我不知道如何解决这个问题，现在已经导致我无法正常开发了，只能弃用这个插件

[PiscineMolitorPatel]

@antfu 能提供下解决办法吗？

[hannoeru]

Force packages pre-bundle

https://vitejs.dev/config/#optimizedeps-include

[PiscineMolitorPatel]

Force packages pre-bundle

https://vitejs.dev/config/#optimizedeps-include

Can you tell me exactly how to do it，thanks

[hannoeru]

Just add packages that cause Vite reload into include list.

Example: https://github.com/antfu/vitesse/blob/2e378f43421855b08ecf983200ab9c3ac4d58d0f/vite.config.ts#L157-L163

[rennzhang]

Just add packages that cause Vite reload into include list.

Example: https://github.com/antfu/vitesse/blob/2e378f43421855b08ecf983200ab9c3ac4d58d0f/vite.config.ts#L157-L163

This doesn't work, it still reloads the page, and after I upgrade the plugin version, I also get 408 problems：

[hannoeru]

Can you provide a repo with the code required to reproduce this issue?

[rennzhang]

Can you provide a repo with the code required to reproduce this issue?

Please clon my repositories, I have all the latest version of the latest version:
https://github.com/RennCheung/vue3-report-demo

steps：

• pnpm i
• pnpm run dev
• Click "about" on the page. (router-link)
  

[pany-ang]

Force packages pre-bundle

https://vitejs.dev/config/#optimizedeps-include

It does solve the problem! However, its drawback is quite obvious: it requires enumerating a lot of content.