Un guide pour la migration de Webpack vers Vite —

Dans cet article, nous verrons comment mettre à niveau une application Web frontale de Webpack vers Vite.

Vite est le dernier outil de développement frontend à connaître une croissance considérable en termes de popularité et d’adoption. Consultez simplement ces téléchargements de npm Trends dans l’image ci-dessous.

Source des images

Cette tendance est portée par un concept clé au cœur de Vite : l’expérience développeur. Par rapport à Webpack, Vite peut offrir nettement plus rapide temps de construction et temps de rechargement à chaud pendant le développement. Pour ce faire, il tire parti des fonctionnalités des navigateurs modernes telles que Modules ES dans le navigateur.

Avant de plonger dans le processus de migration de Webpack vers Vite, il convient de noter que le paysage du développement frontend est en constante évolution et que Vite n’est pas le seul outil à l’honneur. esconstruire est un autre bundler et minificateur JavaScript incroyablement rapide qui attire l’attention des développeurs Web. Et si vous recherchez une approche plus zéro configuration, vous pouvez également explorer Colisqui offre une expérience transparente à de nombreux développeurs.

Considérations avant de migrer vers Vite

Bien que Vite introduit de nombreuses nouvelles fonctionnalités intéressantes dans votre flux de travail, comme pour toute nouvelle technologie, il existe des inconvénients à prendre en compte. Par rapport à un outil aussi mature que Webpack, la principale considération sera l’écosystème de plugins tiers.

Il existe des dizaines de noyaux/officiels Plugins Webpack, et des centaines (voire des milliers) de plugins contribués par la communauté sur npm qui ont été développés au cours des dix années d’utilisation de Webpack. Bien que la prise en charge des plugins pour Vite soit très bonne, vous pouvez vous retrouver dans la situation où le plugin sur lequel vous comptez pour votre projet n’a pas d’équivalent Vite, ce qui pourrait devenir un bloqueur pour votre migration vers Vite.

Étape 1 : Installation de Vite

La première étape pour migrer votre projet consiste à créer une nouvelle application Vite et à explorer l’outil vers lequel vous migrez. Vous pouvez créer une nouvelle application Vite avec les éléments suivants :

npm create vite@latest

Démarrez ensuite le serveur de développement comme ceci :

npm run dev

Maintenant, accédez à l’URL localhost affichée dans votre navigateur.

Vite créera un répertoire contenant les fichiers illustrés ci-dessous.

Beaucoup d’entre eux vous seront familiers et seront des remplacements à l’identique dans votre propre application.

Étape 2 : apporter des modifications à package.json

Pour commencer à utiliser Vite sur votre projet Webpack existant, rendez-vous sur le package.json du projet Webpack que vous souhaitez migrer et installer Vite :

npm install –save vite

En fonction de votre framework frontend, vous souhaiterez peut-être également installer le plugin spécifique au framework :

npm install –save @vitejs/plugin-react

Vous pouvez également mettre à jour tous les scripts de build dont vous disposez pour utiliser Vite au lieu de Webpack :

–  "build": "webpack --mode production",
–  "dev": "webpack serve",
++   "build": "vite build",
++  "dev": "vite serve",

En parallèle, désinstallez Webpack :

npm uninstall –save webpack webpack-cli wepack-dev-server

Maintenant, exécutez votre script de développement pour l’essayer !

npm run dev

Étape 3 : Sortez avec webpack.config, entrez avec vite.config

Sauf si tu es extrêmement Heureusement, vous devrez probablement inclure une configuration supplémentaire. Vite utilise le vite.config.js fichier de configuration, qui est en grande partie analogue à votre existant webpack.config.js déposer.

Vous pouvez trouver la documentation complète de cette configuration Vite sur vitejs.devmais une simple configuration Vite pour une application React pourrait ressembler à ceci :

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  },
})

Étape 4 : Plugins

Sous le capot, Vite utilise Cumul comme outil de construction, et vous pouvez ajouter n’importe quel plugin Rollup à Vite en les installant avec npm :

npm install –save @rollup/plugin-image

`

Ajoutez-les également dans le plugins tableau votre vite.config.js déposer:

import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
      image(),
  ],
})

Plugins Webpack populaires et leurs équivalents Vite

Examinons ensuite quelques plugins Webpack populaires et leurs équivalents Vite.

HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPlugin simplifie la création de fichiers HTML pour servir vos bundles Webpack. Si vous utilisez HtmlWebpackPlugin dans votre projet, Vite a le vite-plugin-html plugin, qui offre des fonctionnalités similaires. Vous pouvez l’installer comme ceci :

npm install --save-dev vite-plugin-html

Et importez dans votre vite.config.js ainsi:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin({
      entry: 'src/main.js',
      template: 'public/index.html',
      inject: {
        data: {
          title: 'index',
          injectScript: `<script src="https://www.sitepoint.com/webpack-vite-migration/./inject.js"></script>`,
        },
    })
  ]
})

MiniCssExtractPlugin est un plugin pour Webpack qui extrait le CSS dans des fichiers séparés. Il crée un fichier CSS pour chaque fichier JavaScript contenant du CSS. Il est généralement utilisé dans les environnements de production pour faciliter un chargement plus efficace du CSS. L’avantage de ceci est double. Premièrement, cela permet au CSS d’être mis en cache séparément par le navigateur. Deuxièmement, cela empêche un flash de contenu sans stylecar CSS n’est plus intégré dans les fichiers JavaScript et peut donc être chargé en parallèle avec JavaScript, ce qui accélère les temps de chargement des pages.

Dans Vite, vous pouvez utiliser vite-plugin-purgecss:

npm install --save-dev vite-plugin-html-purgecss

Utilisez le plugin dans votre vite.config.js fichier comme ceci :

import htmlPurge from 'vite-plugin-html-purgecss'

export default {
    plugins: [
        htmlPurge(),
    ]
}

CopyWebpackPlugin -> vite-plugin-static-copy

CopyWebpackPlugin est utilisé pour copier des fichiers individuels ou des répertoires entiers dans le répertoire de construction. Vite a un plugin similaire appelé vite-plugin-copie-statique:

npm install --save-dev vite-plugin-static-copy

Mettez le code suivant dans vite.config.js:

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default {
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'bin/example.wasm',
          dest: 'wasm-files'
        }
      ]
    })
  ]
}

DéfinirPlugin -> définir()

Dans Webpack, le DefinePlugin est utilisé pour remplacer les jetons dans le code source par leurs valeurs attribuées au moment de la compilation. Cela vous permet de créer des constantes globales pouvant être configurées au moment de la compilation. Dans Vite, vous pouvez obtenir le même effet en utilisant le define choix dans vite.config.jsvous n’aurez donc peut-être pas besoin d’un plugin :

export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
})

Conclusion

Il s’agit d’un guide simple pour migrer une application Webpack frontale vers Vite, comprenant certains des plugins Webpack les plus populaires.

Si votre projet est vaste et complexe avec un processus de construction complexe, la configuration flexible et riche en fonctionnalités de Webpack peut toujours être votre meilleur choix.

Si vous migrez un projet plus petit ou modéré, Vite offre des avantages intéressants. Sa rapidité, tant au niveau du démarrage du serveur que du remplacement des modules à chaud, permet d’augmenter considérablement la productivité des développements. La simplicité de sa configuration peut également être un répit bienvenu, et sa conception avec des modules ES natifs et une compatibilité avec les frameworks modernes à l’esprit le prépare bien pour l’avenir.

La transition de Webpack vers Vite nécessite une planification et des tests minutieux, en particulier lorsqu’on envisage le remplacement ou la refactorisation de plugins. Mais les bénéfices de cette démarche peuvent être substantiels. Vite offre un environnement de développement plus rapide et plus simple qui peut finalement conduire à un flux de travail de développement plus fluide et plus efficace.

Il est toujours bénéfique de garder un œil sur l’évolution du paysage des outils. Pendant que vous poursuivez votre voyage, envisagez également d’explorer d’autres outils modernes tels que esconstruire et Colis pour trouver la solution la mieux adaptée aux besoins de votre projet.

N’oubliez pas que l’outil n’est pas ce qui compte le plus, mais la façon dont vous l’utilisez pour atteindre vos objectifs. Webpack, Vite, esbuild et Parcel sont tous d’excellents outils conçus pour vous aider à créer des projets Web de premier ordre, et le meilleur à utiliser dépend de vos besoins et contraintes spécifiques.

Si vous souhaitez explorer davantage Vite, consultez notre article où nous explorez Vite à travers son code source.

FAQ sur Vite