Integrating Vite with WP

What is Vite?

Vite is a build tool that provides a faster and leaner development experience.
* It can bundle your codes to output assets
* It has Hot Module Replacement (HMR) which reflects your code changes immediately without refreshing the browser

Pre-requisites

Github repo: https://github.com/aliboy08/vite-wp/

Clone the git repo to your project theme directory

				
					gh repo clone aliboy08/vite-wp

Run NPM Install

inside the vite directory, run the install command

				
					npm install

Include the php file on your functions.php

				
					include_once 'vite-wp/vite-wp.php';

Load Asset on WP

				
					add_action('wp_enqueue_scripts', function(){
    
    FF\Vite\load_asset('src/main.js');
    
    // only load the css files, exclude js
    FF\Vite\load_asset('src/main.js', ['css_only' => true]);
});

Start development

				
					npm run dev

Bundle for production

				
					npm run build

Extras

Load critical css

prints the contents of the /src/css/critical.scss file as inline css on the head via wp_head action hook

				
					FF\Vite\load_critical_css();

Defer CSS

adds defer attributes (link=preload) on css link tags, so it doesn’t render block

				
					FF\Vite\defer_css();