Files
twenty_crm/packages/twenty-ui/vite.config.ts
Félix Malfait 79b4b3f783 Improve lazy loading (#12186)
WIP, using preview app to test performance (which was very bad)
2025-05-22 15:07:01 +02:00

147 lines
4.0 KiB
TypeScript

/// <reference types='vitest' />
import react from '@vitejs/plugin-react-swc';
import wyw from '@wyw-in-js/vite';
import * as path from 'path';
import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';
import dts, { PluginOptions } from 'vite-plugin-dts';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';
import { UserPluginConfig } from 'vite-plugin-checker/dist/esm/types';
import packageJson from './package.json';
const entries = Object.keys(packageJson.exports)
.filter((el) => el !== './style.css')
.map((module) => `src/${module}/index.ts`);
const entryFileNames = (chunk: any, extension: 'cjs' | 'mjs') => {
if (!chunk.isEntry) {
throw new Error(
`Should never occurs, encountered a non entry chunk ${chunk.facadeModuleId}`,
);
}
const splitFaceModuleId = chunk.facadeModuleId?.split('/');
if (splitFaceModuleId === undefined) {
throw new Error(
`Should never occurs splitFaceModuleId is undefined ${chunk.facadeModuleId}`,
);
}
const moduleDirectory = splitFaceModuleId[splitFaceModuleId?.length - 2];
if (moduleDirectory === 'src') {
return `${chunk.name}.${extension}`;
}
return `${moduleDirectory}.${extension}`;
};
export default defineConfig(({ command }) => {
const isBuildCommand = command === 'build';
const tsConfigPath = isBuildCommand
? path.resolve(__dirname, './tsconfig.lib.json')
: path.resolve(__dirname, './tsconfig.dev.json');
const checkersConfig: UserPluginConfig = {
typescript: {
tsconfigPath: tsConfigPath,
},
};
const dtsConfig: PluginOptions = {
entryRoot: 'src',
tsconfigPath: tsConfigPath,
};
return {
css: {
modules: {
localsConvention: 'camelCaseOnly',
},
},
optimizeDeps: {
exclude: ['../../node_modules/.vite', '../../node_modules/.cache'],
},
root: __dirname,
cacheDir: '../../node_modules/.vite/packages/twenty-ui',
assetsInclude: ['src/**/*.svg'],
plugins: [
react({
jsxImportSource: '@emotion/react',
plugins: [['@swc/plugin-emotion', {}]],
}),
tsconfigPaths({
projects: ['tsconfig.json'],
}),
svgr(),
dts(dtsConfig),
checker(checkersConfig),
wyw({
include: [
'**/OverflowingTextWithTooltip.tsx',
'**/Tag.tsx',
'**/Avatar.tsx',
'**/Chip.tsx',
'**/LinkChip.tsx',
'**/Avatar.tsx',
'**/AvatarChipLeftComponent.tsx',
'**/ContactLink.tsx',
'**/RoundedLink.tsx',
],
babelOptions: {
presets: ['@babel/preset-typescript', '@babel/preset-react'],
},
}),
],
// Configuration for building your library.
// See: https://vitejs.dev/guide/build.html#library-mode
build: {
cssCodeSplit: false,
minify: 'esbuild',
sourcemap: false,
outDir: './dist',
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true,
interopDefault: true,
defaultIsModuleExports: true,
requireReturnsDefault: 'auto',
},
lib: {
entry: ['src/index.ts', ...entries],
name: 'twenty-ui',
},
rollupOptions: {
// External packages that should not be bundled into your library.
external: Object.keys(packageJson.dependencies || {}),
output: [
{
assetFileNames: 'style.css',
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
format: 'es',
entryFileNames: (chunk) => entryFileNames(chunk, 'mjs'),
},
{
assetFileNames: 'style.css',
format: 'cjs',
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
interop: 'auto',
esModule: true,
exports: 'named',
entryFileNames: (chunk) => entryFileNames(chunk, 'cjs'),
},
],
},
},
};
});