How feasible is it to migrate from AEM + Webpack to AEM + Vite ?

[Abhishekty]

Hi All,

I'm seeking your suggestions for migrating from AEM as a Cloud Service with Webpack and React to AEM as a Cloud Service with Vite and React.

Has anyone attempted this migration? How complex is it, and what kind of challenges can we expect?

I am considering this migration primarily for performance [react pages and it's not SPA] reasons.

Thank you for your input.

[TarunKumar]

Hi @Abhishekty ,

One approach I could suggest is to create a new AEM project in your local using Vite and then understand what deliverables are to be produced and also the source code.
You can figure out the differences between webpack and vite.
One sample vite config file would look something like below:

import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig(({ mode }) => ({
  plugins: [eslintPlugin({ failOnError: true })],
  build: {
    rollupOptions: {
      input: mode === 'development' ? 'src/main/webpack/static/index.html' : 'src/main/webpack/site/main.ts',
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: '[name].[ext]',
      },
    },
    sourcemap: 'inline',
    minify: true,
    cssMinify: true,
    outDir: 'dist/clientlib-site',
    assetsDir: '',
    cssCodeSplit: false,
  },
  publicDir: 'src/main/webpack/resources',
  server: {
    proxy: {
      '/content': {
        target: 'http://localhost:4502',
        changeOrigin: true,
        secure: false,
      },
      '/etc.clientlibs': {
        target: 'http://localhost:4502',
        changeOrigin: true,
        secure: false,
      },
    },
    open: 'src/main/webpack/static/',
  },
}));

Further you can remove webpack config:

@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread
css-loader
css-minimizer-webpack-plugin
cssnano
eslint-webpack-plugin
glob-import-loader
html-webpack-plugin
mini-css-extract-plugin
postcss
postcss-loader
sass-loader
source-map-loader
style-loader
terser-webpack-plugin
ts-loader
tsconfig-paths-webpack-plugin
webpack
webpack-cli
webpack-dev-server
webpack-merge

Thanks
Tarun