Vue 3 mit
Vite Dev Server
Fynn Becker
Das Problem mit Vue CLI
- Langsamer Start des Dev Servers
- Langsames Hot Module Replacement (HMR)
Die Idee
Lösungsansatz von Vite
- Kein Bundling im Dev Server
- Native JS Modules (ESM)
- On-demand compilation
- Bundling für Production
Vite
{
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.3",
"vue-router": "^4.0.0-rc.5",
"vuex": "^4.0.0-rc.2"
},
"devDependencies": {
"vite": "^1.0.0-rc.13",
"@vue/compiler-sfc": "^3.0.3",
"sass": "^1.29.0"
}
}
Vue CLI
{
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^3.0.3",
"vue-router": "^4.0.0-rc.5",
"vuex": "^4.0.0-rc.2"
},
"devDependencies": {
"@vue/cli-service": "^4.5.9",
"@vue/compiler-sfc": "^3.0.3",
"sass": "^1.29.0"
}
}
Vite
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="…">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Vue CLI
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="…">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Demo
Templates
- Preact
- Preact (TypeScript)
- React
- React (TypeScript)
- React (Reason)
- Vue
- Vue (TypeScript)
Mehr über Vite
Vue 3 mit Vite Dev Server
By Fynn Becker
Vue 3 mit Vite Dev Server
- 294