<h2>Vite — A tool for instant work</h2>
Imagine traveling on a high-speed train that departs instantly from the station, skips unnecessary stops, and adapts to your route. This is Vite — a modern development tool that works like a “smart train”: it serves modules “on demand,” saving time and resources.
Vite (from Latin “fast”) is a bundler and development server that uses browser-native ES Modules (ESM) for instant project loading. Unlike traditional tools like Webpack, which require compiling the entire project before launch, Vite works like a “smart train”: it serves modules “on demand,” saving time and resources.
<h3>Why Vite?</h3>
<ul>
<li>Speed: Project launch takes seconds.</li>
<li>Minimal Configuration: Almost no setup for basic projects.</li>
<li>Support for Modern Technologies: Vue, React, Svelte, TypeScript, CSS preprocessors, and more.</li>
<li>Production Optimization: Minification, tree-shaking, SSR support, and dynamic imports.</li>
</ul>
<hr>
<h2>Core concepts of Vite: How it works</h2>
<h3>1. Browser-native ES Modules (ESM)</h3>
Vite uses ESM, supported by all modern browsers. This means:
<ul>
<li>Each File Is a Module: You can import files directly without additional transformations.</li>
<li>Hot Module Replacement (HMR): Changes in code appear instantly, without page reloads.</li>
</ul>
Analogy: Imagine a train that departs the station but only delivers necessary carriages (modules) to stations. Vite works the same: each file is a ready-to-use component loaded “on demand.”
<h3>2. Development and Production Modes</h3>
<ul>
<li>Development Mode: Vite runs a server with HMR and minimal code processing.</li>
<li>Production Mode: The project is built with optimizations (minification, removal of debug logs).</li>
</ul>
Metaphor: This is like the difference between a test route and an official schedule. In development, you experiment with stops; in production, everything is structured and optimized.
<h3>3. Plugins</h3>
Vite uses a plugin system to extend functionality. Plugins can:
<ul>
<li>Process TypeScript, SCSS, Markdown.</li>
<li>Integrate frameworks (Vue, React).</li>
<li>Configure proxies, caching, logging.</li>
</ul>
Example: The plugin <code>@vitejs/plugin-vue</code> enables <code>.vue</code> files (Single File Components) without extra setup.
<hr>
<h2>Configuration file vite.config.ts: The heart of Vite</h2>
The configuration file <code>vite.config.ts</code> is the “schedule” for Vite, defining how it processes your project. It determines how Vite loads modules, runs the server, and builds the project.
<h3>File structure</h3>
The file exports an object with parameters. Here’s a basic structure:
<pre><code class="language-typescript">import { defineConfig } from &#x27;vite&#x27;;
import vue from &#x27;@vitejs/plugin-vue&#x27;;

export default defineConfig({
 plugins: [vue()],
 server: {
 port: 3000,
 open: true
 },
 resolve: {
 alias: {
 &#x27;@&#x27;: &#x27;/src&#x27;
 }
 },
 optimizeDeps: {
 include: [&#x27;lodash&#x27;]
 },
 build: {
 outDir: &#x27;dist&#x27;,
 minify: &#x27;terser&#x27;
 }
});
</code></pre>
Analogy: Imagine configuring a train. Each parameter is a point in the schedule affecting its operation.
<hr>
<h2>Key parameters and their values</h2>
<ul>
<li>
<code>plugins</code>
<ul>
<li>Description: List of plugins to extend functionality.</li>
<li>Possible Values: Array of plugins (e.g., <code>@vitejs/plugin-vue</code>, <code>@vitejs/plugin-react</code>).</li>
<li>Example:<pre><code class="language-typescript">plugins: [vue(), react()]
</code></pre>
</li>
</ul>
</li>
<li>
<code>resolve</code>
<ul>
<li>Description: Settings for resolving paths and dependencies.</li>
<li>Possible Values: Object with <code>alias</code> (aliases) and <code>extensions</code> (file extensions).</li>
<li>Example:<pre><code class="language-typescript">resolve: {
 alias: { &#x27;@&#x27;: &#x27;/src&#x27; },
 extensions: [&#x27;.ts&#x27;, &#x27;.vue&#x27;]
}
</code></pre>
</li>
</ul>
</li>
<li>
<code>server</code>
<ul>
<li>Description: Local development server settings.</li>
<li>Possible Values: Port, host, proxy, browser opening.</li>
<li>Example:<pre><code class="language-typescript">server: {
 port: 3000,
 open: true,
 proxy: {
 &#x27;/api&#x27;: &#x27;https://api.example.com&#x27;
 }
}
</code></pre>
</li>
</ul>
</li>
<li>
<code>optimizeDeps</code>
<ul>
<li>Description: Settings for pre-optimizing dependencies.</li>
<li>Possible Values: <code>include</code> (dependencies to optimize), <code>exclude</code> (exclusions).</li>
<li>Example:<pre><code class="language-typescript">optimizeDeps: {
 include: [&#x27;lodash&#x27;],
 exclude: [&#x27;lodash-es&#x27;]
}
</code></pre>
</li>
</ul>
</li>
<li>
<code>build</code>
<ul>
<li>Description: Build settings.</li>
<li>Possible Values: <code>outDir</code> (output folder), <code>minify</code> (minifier), <code>rollupOptions</code> (Rollup settings).</li>
<li>Example:<pre><code class="language-typescript">build: {
 outDir: &#x27;dist&#x27;,
 minify: &#x27;terser&#x27;
}
</code></pre>
</li>
</ul>
</li>
<li>
<code>test</code>
<ul>
<li>Description: Testing settings (via Vite Test).</li>
<li>Possible Values: <code>environment</code> (test environment), <code>coverage</code> (code coverage).</li>
<li>Example:<pre><code class="language-typescript">test: {
 environment: &#x27;jsdom&#x27;,
 coverage: {
 provider: &#x27;istanbul&#x27;
 }
}
</code></pre>
</li>
</ul>
</li>
</ul>
<hr>
<h2>Practical examples with Vue.js</h2>
<h3>Example 1: Basic Vue configuration</h3>
<pre><code class="language-typescript">import { defineConfig } from &#x27;vite&#x27;;
import vue from &#x27;@vitejs/plugin-vue&#x27;;

export default defineConfig({
 plugins: [vue()],
 server: {
 port: 5173,
 open: true
 },
 resolve: {
 alias: {
 &#x27;@&#x27;: &#x27;/src&#x27;
 }
 }
});
</code></pre>
What does this config do?
<ul>
<li>Enables Vue Single File Components (<code>.vue</code>).</li>
<li>Starts the server on port 5173.</li>
<li>Allows using <code>@</code> as an alias for <code>/src</code>.</li>
</ul>
<hr>
<h3>Example 2: API Proxy configuration</h3>
<pre><code class="language-typescript">import { defineConfig } from &#x27;vite&#x27;;

export default defineConfig({
 server: {
 proxy: {
 &#x27;/api&#x27;: {
 target: &#x27;https://jsonplaceholder.typicode.com&#x27;,
 changeOrigin: true,
 rewrite: (path) =&gt; path.replace(/^\/api/, &#x27;&#x27;)
 }
 }
 }
});
</code></pre>
Why is this needed?
<ul>
<li>Avoids CORS issues during API testing.</li>
<li>Simplifies calls: <code>fetch('/api/posts')</code> redirects to <code>https://jsonplaceholder.typicode.com/posts</code>.</li>
</ul>
<hr>
<h3>Example 3: Optimizing additional dependencies</h3>
<pre><code class="language-typescript">import { defineConfig } from &#x27;vite&#x27;;

export default defineConfig({
 optimizeDeps: {
 include: [&#x27;axios&#x27;, &#x27;vue-i18n&#x27;],
 exclude: [&#x27;lodash-es&#x27;]
 }
});
</code></pre>
Why is this important?
<ul>
<li><code>axios</code> and <code>vue-i18n</code> are pre-optimized, speeding up server launch.</li>
<li><code>lodash-es</code> is excluded to avoid version conflicts.</li>
</ul>
<hr>
<h2>Steps to configure</h2>
<ol>
<li>Create <code>vite.config.ts</code> in the project root.</li>
<li>Import <code>defineConfig</code> and required plugins (e.g., <code>@vitejs/plugin-vue</code>).</li>
<li>Add base parameters (e.g., <code>plugins</code>, <code>server</code>).</li>
<li>Test changes using <code>vite dev</code>.</li>
<li>Configure the build using <code>vite build</code>.</li>
</ol>
Metaphor: This is like configuring a train. First, select carriages (plugins), then set the route (parameters), and finally test the schedule.
<hr>
<h2>Conclusion: Why Vite is the future</h2>
Vite revolutionizes traditional development approaches, making it fast, simple, and adaptable. Its configuration file is the key to flexibility: you can tailor the project to any requirements, from basic examples to complex monorepos.
Key takeaways:
<ul>
<li>ESM makes Vite incredibly fast.</li>
<li>Configuration File gives precise control over Vite’s behavior.</li>
<li>Plugins expand capabilities without complicating the process.</li>
</ul>
Tips:
<ul>
<li>Start with a basic configuration, then add parameters as needed.</li>
<li>Use <code>vite dev</code> to test changes in real-time.</li>
<li>Don’t forget production optimizations: minification, caching, and tree-shaking.</li>
</ul>
Vite is not just a tool but a philosophy: do more, spend less. With it, you can focus on product creation instead of fighting infrastructure.

Hey there! Welcome to The Looop Tech - Vue.js. I’m your host IGC , your friendly neighborhood Vue.js enthusiast! Join me each week as I chat about the latest Vue.js news, share fun tips, and dive into all things Nuxt.js. It’s just me here, so if you’

Vuejs&Nuxtjs

Vite is a modern development tool designed to speed up project launch by using browser-native ES Modules for instant loading, unlike traditional bundlers like Webpack. It offers minimal configuration, supports modern technologies, and optimizes for production with features like minification and dynamic imports. Vite's plugin system extends functionality allowing integration with frameworks and processing various file types. The configuration file 'vite.config.ts' enables precise control over project settings.

Vite: accelerate development with modular adaptability