位置: IT常识 - 正文
vite项目优化(项目优化管理工具)
编辑：rootadmin推荐整理分享vite项目优化(项目优化管理工具)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:项目优化设计,项目优化方法,优化项目 英文,项目优化是什么,web项目优化,项目优化是什么,vericut优化,项目优化管理工具,内容如对您有帮助，希望把文章链接给更多的朋友！
首先在讲述vite优化之前，我们先来分析一下和传统的项目管理构建工具的区别，以webpack为例，它是利用plugin插件和loader加载器对项目的所有模块和依赖统一通过入口文件进行编译，从而变成我们html所需要的js格式渲染我们的页面。
随着浏览器的发展，逐渐的已经支持了 ES 模块
因此Vite在设计时考虑在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
优势： 这样就避免了随着应用体积的增大，导致了启动服务缓慢，一处代码更新界面需要数秒钟才能显示的问题。运行速度真的没得说。
同样的，作为一个新型的构建框架，也有很多的弊端。 缺点： 只能针对现代浏览器（ES2015+）、生态小等。
当然我们今天说的不止是这些，既然选择了vite框架，自然不会考虑浏览器的兼容性，我们更多的还是关注vite本身的性能。
优势即劣势正是因为vite本身是动态加载的资源，当某个路由的依赖项比较多的时候，加上你可能使用了某些组件库的按需加载（比如element-plus），在进入页面时可谓是很慢，而且页面都是会像卡壳了一样刷新一次。
技术层观察的表现是，network加载了很多资源，同时在cmd终端会显示：
下午7:01:09 [vite] ✨ new dependencies optimized: element-plus/es/components/message-box/style/index下午7:01:09 [vite] ✨ optimized dependencies changed. reloading下午7:01:23 [vite] ✨ new dependencies optimized: element-plus/es/components/form/style/index下午7:03:57 [vite] vite.config.ts changed, restarting server...这是因为需要按需写入组件与样式导致的，那么怎么解决这一问题呢，我们更希望在开发环境下，能提高我们的运行速度，而且让生成环境的包体积更小。然而，好像没有太好的解决方案，因为第一次按需加载按照vite的设计就必须要写入。
换个思路，那么我只能在开发环境下全局加载组件，打包时再执行按需加载了…
// 自定义插件 ./plugins/fullImportPluginimport * as path from 'path'import type { Plugin, ResolvedConfig } from 'vite'export default function fullImportPlugin () { let config: ResolvedConfig return <Plugin>{ name: 'fullImportElementPlus', async configResolved (conf) { config = conf }, transform (code, id) { // 判断当前处理的是否是 _src/main.ts_ if (path.join(config.root, 'src/main.ts') === id) { const name = 'ElementPlus' // 引入 ElementPlus 和 样式 const prepend = `import ${name} from 'element-plus';\nimport 'element-plus/theme-chalk/src/index.scss';\n` code = code.replace('.mount(', ($1) => `.use(${name})` + $1) return prepend + code } return code } }}// vite.config.tsimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers'import unElementPlus from 'unplugin-element-plus/vite'import unComponents from 'unplugin-vue-components/vite'import fullImportPlugin from './plugins/fullImportPlugin'const config = {plugins:[]}if ( modes === 'development'){ config.plugins.push(fullImportPlugin())} else { config.plugins.push(unElementPlus({ useSource: true })) config.plugins.push(unComponents({ dirs:[], dts: true, resolvers: [ ElementPlusResolver() ] }))}export default config下一篇：Win7系统利用家庭组把多台电脑资源共享的方法(win7家庭组怎么用)
