随着日积月累,代码量越来越多,vue单页面已经有了100+pages,30+vuecomponents,因此启动速度越来越慢。 2、vue-cli-service和vite启动速度对比 将vue-cli-service升级切换到vite之后启动速度得到了巨幅提升,下面是对比结果: 1.使用vue-cli-service serve启动: 平均耗时:15s 最大耗时:40s 最小耗时:10s image 2.使...
首先,需要卸载vue-cli相关的依赖,并安装Vite及其插件。 bash # 卸载vue-cli相关依赖 npm uninstall @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service sass-loader core-js @babel/core @babel/eslint-parser # 安装Vite及其插件 npm install @...
最后,验证一下引入vite后的效果。 在vue-cli的命令里添加--report参数,能够查看构建时间:"serve": "vue-cli-service serve --report", vite构建完成后,默认会有时间显示。 下面给出对比图。 vue-cli构建时间: vite构建时间: 可以看出来提升还是很大的。使用vite构建,相比vue-cli,时间大约缩短为原先的10倍。
npm run script脚本名,类似于用npx执行脚本的命令,就是说先去局部的node_module/.bin/文件里找命令; 先去局部的node_module/.bin/文件里找命令,找到了vue-cli-service,但是这是一个软连接,连接指向@vue/cli-service里的package.json的bin下的vue-cli-service命令 在package.json的scrpt中写和bin写,区别是第...
/cli-service)，该依赖：可升级；一个运行时依赖 (@vue 基于 webpack 构建，并带有合理的默认配置；...
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli vue-cli 是 Vue 早期推出的一款脚手架,使用 webpack 创建 Vue 项目,可以选择安装需要的各种插件,比如 Vuex、VueRouter等。 vue-cli 用于创建 vue2 的项目; @vue/cli 用于创建 vue3 的项目,当然也支持 vue2。
vue-cli-service 中使用 vue.config.js 作为配置文件;而 vite 则默认会需要创建一个 vite.config.ts 来作为配置文件。基础的配置文件很简单: import{ defineConfig }from'vite'; exportdefaultdefineConfig({ plugins: [ // ... ], }) 创建该配置文件,之前的 vue.config.js 就不再使用了。
"dev": "vue-cli-service serve", "build": "vue-cli-service build", "deploy": "npx deploy", "vite": "vite" //这个就是新增的vite启动命令 }, 2、安装vite相关插件 npm i vite vite-plugin-html @vitejs/plugin-vue2 vite-plugin-require-transform @originjs/vite-plugin-commonjs //一共是五...
Vue CLI 允许我们在开发和生产期间创建和构建项目。CLI 隐藏了 Webpack 的复杂配置细节,并在开发和生产过程中为我们的项目提供服务。但是,如果我们想要将它与 Vite 进行比较,那就让我们再深入一点。 Webpack 正如Webpack 网站所描述的,Webpack 是一个静态模块打包工具。但是,这是什么意思?Webpack 的主要目标是获取...
Vue CLI作为Vue 2的官方脚手架工具，基于Webpack开发，其特点是将所有代码在服务启动前打包成Bundle，这在处理大型项目时会显著影响启动速度。Vite在开发环境下的体验优于Vue CLI，因为它基于浏览器原生功能，无需进行打包操作。Vue CLI则在开发和生产环境中都依赖Webpack，虽然在生产环境下同样基于源代码...