首页 > 其他分享 >vite

vite

时间:2023-05-29 11:57:30浏览次数:32  
标签:浏览器 react webpack 打包 vite Vite

  1. 劣势
  2. 优势
    • 打包快
    • 预打包
      • 第三方库预打包

通过浏览器去做打包esmodule?

webpack 迁移到 vite

  • magic commit (webpack)
    • rollup

特性

  1. 在开发环境中,一个 import 语句代表一个 HTTP 请求,正式Vite的dev server来接收这些请求、进行文件转义以及返回浏览器可以正常运行的代码,从而让项目正常进行

对比
react 官方基于 Webpack 的脚手架create-react-app,从项目初始化到依赖安装所花的时间与 Vite 对比如下:
![[Pasted image 20220623152500.png]]

缺点:

  1. 二次预构建页面 reload 的问题

registry.npmmirror.com 淘宝源新地址应该是这个

标签:浏览器,react,webpack,打包,vite,Vite
From: https://www.cnblogs.com/kitebear/p/17440032.html

相关文章

  • 最佳实践:基于vite3的monorepo前端工程搭建
    一、技术栈选择1.代码库管理方式-Monorepo:将多个项目存放在同一个代码库中▪选择理由1:多个应用(可以按业务线产品粒度划分)在同一个repo管理,便于统一管理代码规范、共享工作流▪选择理由2:解决跨项目/应用之间物理层面的代码复用,不用通过发布/安装npm包解决共享问题2.依赖管理-......
  • 基于Electron24+Vite4+Vue3搭建桌面端应用
    一说到创建桌面应用,就不得不提及Electron和Tauri框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序。之前也有使用vite2+vue3+electronc创建桌面端项目,不过 vue-cli-plugin-electron-builder 脚手架插件构建的项目electron版本只有13.x。如......
  • vite.config配置环境
    正常开发中前端打包后的dist代码是作为一个整体发到服务器中的,我们在vite.config里面配置base:‘/’相对路径就可以了但是往往项目是多样化的,有时候会用各种转嫁,桥接的方式去发版这个时候如果还使用了ngnix代理,那么相对路径就会出问题这个时候我们根据开发环境的不同配置不一样......
  • vue3+vite build打包删除控制台打印
    很简单,直接在vite.config.ts里面添加配置即可:exportdefault({mode})=>defineConfig({build:{minify:"terser",terserOptions:{compress:{//生产环境时移除consoledrop_console:true,drop_debugger:true,......
  • vite开启gzip打包
    vite社区提供了一个插件vite-plugin-compression,可以用来进行gzip压缩。1.在项目中执行安装命令npmi'vite-plugin-compression'2.在vite.config.ts中引入,并增加一下代码片段viteCompression importviteCompressionfrom'vite-plugin-compression'constplugins=[v......
  • vite启动调试配置外网访问
    修改vite.config.js配置文件import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'const{resolve}=require('path')exportdefaultdefineConfig({//起个别名,在引用资源时,可以用‘@/资源路径’直接访问resolve:{alias:{......
  • Vue3+Vite部署到Netlify
    前言本项目的前端是使用Vue3技术。因为用到了Vite做代理解决跨域问题,所以部署到Netlify需要多做一些步骤。使用Vite代理后,如果前端是在本地部署,需要添加VITE_PROXY环境变量。例如在.env.development文件中添加VITE_PROXY=[["/api/v1","https://xx.naihe.me/api/v1"],["/ws",......
  • vite打包中性能优化方面
    1、静态文件按类型分包build中添加如下代码:build:{rollupOptions:{output:{chunkFileNames:'static/js/[name]-[hash].js',entryFileNames:'static/js/[name]-[hash].js',assetFileNames:'static/[ext]/[name]-[hash].......
  • Create Vite App 支持 OpenTiny 啦
    大家好,我是Kagol,个人公众号:前端开源星球。一个月前,日日自新写了一篇介绍CreateViteApp开源项目的文章:基于vite4.x快速搭建开箱即用,高度可定制化模版脚手架CreateViteApp是基于esbuild+commander+ejs模板渲染进行开发脚手架,用于创建vite4.xtypescript5.xvite......
  • error Resolve error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compile
    创建Vue3项目时出错error Resolveerror:@vitejs/plugin-vuerequiresvue(>=3.2.13)or@vue/compiler-sfctobepresentinthedependencytree将vue 升级到 [email protected]  版本 执行[email protected] ......