为什么越来越多的人放弃Webpack而使用Vite？

封面图Hi~Shoutout，我是有心程序员阿壮。我做的是后端，但也有意识地了解一些前端技术，争取有一天成为一名“全职”程序员。今天，我想分享以下使用Vite的经验。使用VueCLI创建的项目默认打包工具是webpack。webpack的缺点就是打包速度真的很慢。每次浏览器都需要几秒的响应时间，我们这次使用Vite作为打包工具。实际体验了一下发现速度比webpack快很多，而且现在vite2已经上线了，bug也比以前少了很多。我建议您尝试一下。下面是使用yarn创建一个Vue3+TypeScript+Vite项目的具体步骤yarncreatevitemy-vue-app--templatevue-tsintegrateElementPlusinstallyarnaddelement-pluseditmain.tsimport{createApp}from"vue";importAppfrom"./App.vue";importElementPlusfrom"element-plus";import"element-plus/lib/theme-chalk/index.css";constapp=createApp(App);app.use(ElementPlus);app.mount("#app");集成Vuex安装yarnaddvuex@next--savenewstore/index.tsimport{createStore}from"vuex";importUserfrom"./modules/user";exportdefaultcreateStore({state:{},mutations:{},actions:{},modules:{User,},});新商店/模块/用户conststate={count:0,};constgetters={getCount(){返回state.count;},};const突变={};constactions={};exportdefault{namespaced:true,state,getters,mutations,actions,};编辑主要。tsimport{createApp}from"vue";importAppfrom"./App.vue";importstorefrom"./store/index";constapp=createApp(App);app.use(store);app.mount("#app");IntegrateVueRouter安装yarnaddvue-router@4Newrouter/index.tsimport{createRouter,createWebHashHistory,RouteRecordRaw}from"vue-router";importLayoutfrom"../layouts/index.vue";constroutes:Array=[{path:"/",name:"Layout",component:Layout,},];constrouter=createRouter({history:createWebHashHistory(),routes,});导出默认路由器；从“vue”编辑main.tsimport{createApp}；从“./App.vue”导入应用程序；从“./router/index”导入路由器；constapp=createApp(App);app.use(路由器）；app.mount（“#app”）；integratelessinstallyarnaddlessless-loaderintegrateprettierinstallyarnaddprettierWebStormsetvitecommandvite//启动开发服务器vitebuild//构建生产环境产品vitepreview//本地预览我是阿壮，一个热血程序员，来生产并构建产品。微信搜索：Techmao，获取第一时间更新，下期见