环境vite:2.9.9unplugin-vue-components:0.19.6参考问题：使用按需导入时，服务首次启动会依赖预建样式#361vite-plugin-ifdef（使用条件complieinvite)问题描述在本地开发时，跳转到跳转页面需要10多秒。打包后就没有这个问题了。问题分析发现，如果跳转到的页面上有新的antd组件，就会出现这个问题。问题原因是项目中使用了unplugin-vue-Components按需引入antd组件，但是在开发环境中出现问题。详情请参考issue。其实按需导入样式带来的问题就解决了。开发环境全局导入样式，官方环境根据需要导入有样式问题的vite.config。ts如下（这里省略了部分配置，只关注需要修改的部分）;exportdefault({command,mode}:ConfigEnv):UserConfig=>{//...return{//...plugins:[//...Components({resolvers:[AntDesignVueResolver()],}),],};我们引入一个插件vite-plugin-ifdef来区分开发环境和生产环境，使用yarn或者npm安装yarnaddvite-plugin-ifdef然后修改vite.config.ts如下importComponentsfrom"unplugin-vue-components/vite”；从“unplugin-vue-components/resolvers”导入{AntDesignVueResolver}；从“vi导入ifdefte-plugin-ifdef";/**vite-plugin-ifdef插件配置项*/typeifdefConfig={"ifdef-define":any;"ifdef-option":any};exportdefault({command,mode}:ConfigEnv):UserConfig&IfdefConfig=>{//...return{//...plugins:[ifdef(),//...Components({/***开发环境（服务命令）如果importStyle是configured会导致使用ant-design的组件加载时间长达10s甚至更长*所以在打包环境（build命令）中只按需加载ant-design样式，导入所有样式文件进入开发环境。*https://github.com/antfu/unplugin-vue-components/issues/361*/resolvers:[AntDesignVueResolver({importStyle:command==="build"?"less":false})],}),],"ifdef-define":{COMMAND:command,},//注意这里有一个坑，vite-plugin-ifdef的文档中给出的键名ifdef-config是错误的"ifdef-option":{verbose:false,},};在项目入口处Import样式到文件main.js//=======================================================================================================================================================================================================================================风格开始====================================================//开发环境（viteserve命令）只引入antd样式全量，生产环境（vitebuild命令）使用unplugin-vue-components按需引入（参见：vite.config.js)///#ifCOMMAND==='serve'import"ant-design-vue/dist/antd.less";///#else//unplugin-vue-components无法导入非-的样式根据需要组件模块，所以这里Importimport"ant-design-vue/lib/message/style/index.less";import"ant-design-vue/lib/notification/style/index.less";///#endif//=============================根据开发环境和生产环境使用不同的方式引入antd风格的end===================================================================================================================================================================================自定义的antd弹框样式与本地版本和发布版本不同。发现在antd.less之前引入了自定义组件，导致开发环境和生产环境的样式顺序不一致。因此，最好在代码中引入上述风格。到main.js的顶部
