Multi-level lazy loading routing will lead to multiple loading of styles and reloading of pages. #235
Description
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"