feat(config): optimize dependency management and enhance isomorphic layout effect hook
- Added a comprehensive list of dependencies to optimize for faster development builds in vite.config.ts. - Improved the useIsomorphicLayoutEffect hook with additional safety checks to ensure React hooks are available in both client and server environments.
This commit is contained in:
@@ -1,6 +1,25 @@
|
|||||||
import { useLayoutEffect, useEffect } from 'react';
|
import { useLayoutEffect, useEffect } from 'react';
|
||||||
|
|
||||||
// Use useLayoutEffect in browser environments and useEffect in SSR environments
|
// Use useLayoutEffect in browser environments and useEffect in SSR environments
|
||||||
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
// with additional safety checks to ensure React hooks are available
|
||||||
|
const useIsomorphicLayoutEffect = (() => {
|
||||||
|
// Check if we're in a browser environment
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
// Server-side: return useEffect (which won't execute anyway)
|
||||||
|
return useEffect;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Client-side: ensure React hooks are available
|
||||||
|
try {
|
||||||
|
if (useLayoutEffect && typeof useLayoutEffect === 'function') {
|
||||||
|
return useLayoutEffect;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('useLayoutEffect not available, falling back to useEffect:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback to useEffect if useLayoutEffect is not available
|
||||||
|
return useEffect;
|
||||||
|
})();
|
||||||
|
|
||||||
export default useIsomorphicLayoutEffect;
|
export default useIsomorphicLayoutEffect;
|
||||||
@@ -28,6 +28,31 @@ export default defineConfig(({ command }) => {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// **Optimize Dependencies**
|
||||||
|
optimizeDeps: {
|
||||||
|
include: [
|
||||||
|
'react',
|
||||||
|
'react-dom',
|
||||||
|
'react/jsx-runtime',
|
||||||
|
'react/jsx-dev-runtime',
|
||||||
|
'antd',
|
||||||
|
'@dnd-kit/core',
|
||||||
|
'@dnd-kit/sortable',
|
||||||
|
'@dnd-kit/modifiers',
|
||||||
|
'@dnd-kit/utilities',
|
||||||
|
'react-redux',
|
||||||
|
'@reduxjs/toolkit',
|
||||||
|
'i18next',
|
||||||
|
'react-i18next',
|
||||||
|
'react-router-dom',
|
||||||
|
'moment',
|
||||||
|
'date-fns',
|
||||||
|
'axios',
|
||||||
|
'socket.io-client'
|
||||||
|
],
|
||||||
|
force: true, // Force re-optimization on every dev server start
|
||||||
|
},
|
||||||
|
|
||||||
// **Build**
|
// **Build**
|
||||||
build: {
|
build: {
|
||||||
// **Target**
|
// **Target**
|
||||||
|
|||||||
Reference in New Issue
Block a user