Tech: Réduction de la taille du paquet javascript

.github/workflows/cicd-app.yml

@@ -102,7 +102,7 @@ jobs:
         with:
           cache: npm
           cache-dependency-path: ./frontend/package-lock.json
-          node-version: 20
+          node-version: 24
 
       - name: Install Node.js dependencies
         run: npm ci
@@ -228,7 +228,7 @@ jobs:
         with:
           cache: npm
           cache-dependency-path: ./frontend/package-lock.json
-          node-version: 20
+          node-version: 24
 
       - name: Setup Firefox
         uses: browser-actions/setup-firefox@latest
@@ -286,7 +286,7 @@ jobs:
         with:
           cache: npm
           cache-dependency-path: ./frontend/package-lock.json
-          node-version: 20
+          node-version: 24
 
       - name: Install Node.js dependencies
         run: npm ci

frontend/cypress/e2e/main_window/reporting/create_reporting.spec.ts

@@ -1,4 +1,4 @@
-import { omit } from 'lodash'
+import { omit } from 'lodash-es'
 
 import { FAKE_MAPBOX_RESPONSE } from '../../constants'
 import { createReporting } from '../../utils/createReporting'

frontend/cypress/e2e/main_window/vigilance_area/create_vigilance_area.spec.ts

@@ -17,6 +17,7 @@ describe('Create Vigilance Area', () => {
 
     cy.viewport(1580, 1024)
     cy.visit('/')
+
     cy.wait(['@getAmps', '@getRegulatoryAreas', '@getVigilanceAreas'])
 
     cy.intercept('PUT', '/bff/v1/vigilance_areas').as('createVigilanceArea')

frontend/package.json

@@ -5,8 +5,8 @@
   "private": true,
   "type": "module",
   "engines": {
-    "node": "20",
-    "npm": "10"
+    "node": ">=24.0.0",
+    "npm": ">=11"
   },
   "scripts": {
     "build": "vite build",
@@ -26,7 +26,7 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "24.31.4",
+    "@mtes-mct/monitor-ui": "24.34.1",
     "@react-pdf/renderer": "4.3.0",
     "@reduxjs/toolkit": "2.8.2",
     "@sentry/browser": "8.54.0",
@@ -46,7 +46,7 @@
     "imask": "7.6.1",
     "jsts": "2.12.1",
     "jszip": "^3.10.1",
-    "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
     "ol": "10.6.1",
     "ol-mapbox-style": "12.3.3",
     "ramda": "0.31.3",
@@ -75,16 +75,17 @@
   },
   "devDependencies": {
     "@faker-js/faker": "9.9.0",
-    "@import-meta-env/cli": "^0.7.2",
+    "@import-meta-env/cli": "0.7.3",
     "@import-meta-env/prepare": "0.2.2",
-    "@import-meta-env/unplugin": "^0.6.2",
+    "@import-meta-env/unplugin": "0.6.2",
     "@jest/globals": "29.7.0",
     "@swc/core": "1.13.5",
     "@swc/jest": "0.2.39",
-    "@tsconfig/vite-react": "3.4.0",
+    "@tsconfig/vite-react": "7.0.0",
     "@types/google.maps": "3.58.1",
     "@types/jest": "29.5.14",
-    "@types/node": "20.9.0",
+    "@types/node": "24.1.0",
+    "@types/lodash-es": "4.17.12",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@typescript-eslint/eslint-plugin": "7.1.0",
@@ -124,8 +125,9 @@
     "puppeteer": "22.12.1",
     "ramda": "0.31.3",
     "type-fest": "4.41.0",
+    "rollup-plugin-visualizer": "5.14.0",
     "typescript": "5.9.2",
-    "vite": "6.3.5",
+    "vite": "7.0.6",
     "vite-plugin-svgr": "4.5.0",
     "vite-tsconfig-paths": "5.1.4"
   },

frontend/src/App.tsx

@@ -4,7 +4,7 @@ import { ErrorBoundary } from '@components/ErrorBoundary'
 import { RequireAuth } from '@components/RequireAuth'
 import { SideWindow } from '@features/SideWindow'
 import { useMatomo } from '@hooks/useMatomo'
-import { OnlyFontGlobalStyle, THEME, ThemeProvider } from '@mtes-mct/monitor-ui'
+import { GlobalStyle, THEME, ThemeProvider } from '@mtes-mct/monitor-ui'
 import { BackOfficePage } from '@pages/BackOfficePage'
 import { HomePage } from '@pages/HomePage'
 import { Login } from '@pages/Login'
@@ -37,7 +37,7 @@ export function App() {
 
   return (
     <ThemeProvider theme={THEME}>
-      <OnlyFontGlobalStyle />
+      <GlobalStyle />
       <CustomGlobalStyle />
 
       <RsuiteCustomProvider disableRipple locale={frFR}>

frontend/src/api/googlePlacesAPI/googlePlacesAPI.ts

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash'
+import { debounce } from 'lodash-es'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 const GOOGLEMAPS_GEOCODE_URL = 'https://maps.googleapis.com/maps/api/geocode/json'

frontend/src/api/nominatimAPI.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import { isEmpty, throttle } from 'lodash-es'
 import { useEffect, useState, useMemo, useRef, type MutableRefObject } from 'react'
 
 const NOMINATIM_API_URL = 'https://nominatim.openstreetmap.org/search'
@@ -39,7 +39,7 @@ export const useNominatimAPI = (search, { limit = 10 } = {}) => {
   const abortControlerRef = useRef() as MutableRefObject<AbortController>
 
   const throttledSearch = useMemo(() => {
-    const throttled = _.throttle(
+    const throttled = throttle(
       query => {
         if (abortControlerRef.current) {
           abortControlerRef.current.abort()
@@ -63,7 +63,7 @@ export const useNominatimAPI = (search, { limit = 10 } = {}) => {
 
           return fetch(queryURL, { signal: abortControlerRef.current.signal })
             .then(r => r.json())
-            .then(data => setResults(_.isEmpty(data) ? [{ display_name: 'Pas de résultats' }] : data))
+            .then(data => setResults(isEmpty(data) ? [{ display_name: 'Pas de résultats' }] : data))
         }
 
         return setResults([])

frontend/src/components/ZonePicker/index.tsx

@@ -4,7 +4,7 @@ import { Accent, Button, Icon, IconButton, Label } from '@mtes-mct/monitor-ui'
 import { InteractionListener, OLGeometryType } from 'domain/entities/map/constants'
 import { centerOnMap } from 'domain/use_cases/map/centerOnMap'
 import { useField } from 'formik'
-import { isEqual } from 'lodash'
+import { isEqual } from 'lodash-es'
 import { useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 

frontend/src/domain/shared_slices/Administrative.ts

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit'
-import _ from 'lodash'
+import { concat, uniq, without } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -22,7 +22,7 @@ const administrativeSlice = createSlice({
      * @param {AdministrativeZone} action.payload - The regulatory zone
      */
     hideAdministrativeLayer(state, action) {
-      state.showedAdministrativeLayerIds = _.without(state.showedAdministrativeLayerIds, action.payload)
+      state.showedAdministrativeLayerIds = without(state.showedAdministrativeLayerIds, action.payload)
     },
 
     /**
@@ -33,7 +33,7 @@ const administrativeSlice = createSlice({
      * @param {AdministrativeZone} action.payload - The regulatory zone
      */
     showAdministrativeLayer(state, action) {
-      state.showedAdministrativeLayerIds = _.uniq(_.concat(state.showedAdministrativeLayerIds, action.payload))
+      state.showedAdministrativeLayerIds = uniq(concat(state.showedAdministrativeLayerIds, action.payload))
     }
   }
 })

frontend/src/domain/shared_slices/Amp.ts

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit'
-import _ from 'lodash'
+import { concat, difference, union, uniq, without } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -31,8 +31,8 @@ const ampSlice = createSlice({
     addAmpZonesToMyLayers(state, action) {
       return {
         ...state,
-        selectedAmpLayerIds: _.union(state.selectedAmpLayerIds, action.payload),
-        showedAmpLayerIds: _.union(state.showedAmpLayerIds, action.payload)
+        selectedAmpLayerIds: union(state.selectedAmpLayerIds, action.payload),
+        showedAmpLayerIds: union(state.showedAmpLayerIds, action.payload)
       }
     },
 
@@ -43,10 +43,10 @@ const ampSlice = createSlice({
      * @param {number} action.payload - The amp zone id
      */
     hideAmpLayer(state, action) {
-      state.showedAmpLayerIds = _.without(state.showedAmpLayerIds, action.payload)
+      state.showedAmpLayerIds = without(state.showedAmpLayerIds, action.payload)
     },
     hideAmpLayers(state, action) {
-      state.showedAmpLayerIds = _.without(state.showedAmpLayerIds, ...action.payload)
+      state.showedAmpLayerIds = without(state.showedAmpLayerIds, ...action.payload)
     },
 
     /**
@@ -59,8 +59,8 @@ const ampSlice = createSlice({
     removeAmpZonesFromMyLayers(state, action) {
       return {
         ...state,
-        selectedAmpLayerIds: _.difference(state.selectedAmpLayerIds, action.payload),
-        showedAmpLayerIds: _.difference(state.showedAmpLayerIds, action.payload)
+        selectedAmpLayerIds: difference(state.selectedAmpLayerIds, action.payload),
+        showedAmpLayerIds: difference(state.showedAmpLayerIds, action.payload)
       }
     },
 
@@ -71,7 +71,7 @@ const ampSlice = createSlice({
      * @param {AmpZone[]} action.payload - The amp zone
      */
     showAmpLayer(state, action) {
-      state.showedAmpLayerIds = _.uniq(_.concat(state.showedAmpLayerIds, action.payload))
+      state.showedAmpLayerIds = uniq(concat(state.showedAmpLayerIds, action.payload))
     }
   }
 })

frontend/src/domain/shared_slices/MissionFilters.ts

@@ -1,7 +1,7 @@
 import { customDayjs } from '@mtes-mct/monitor-ui'
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
 import { missionFiltersMigrations } from '@store/migrations/missionsFilters'
-import { isEqual } from 'lodash'
+import { isEqual } from 'lodash-es'
 import { createMigrate, persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 

frontend/src/domain/shared_slices/Regulatory.ts

@@ -1,5 +1,5 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import _ from 'lodash'
+import { concat, difference, union, uniq, without } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -31,8 +31,8 @@ const regulatorySlice = createSlice({
     addRegulatoryZonesToMyLayers(state, action: PayloadAction<number[]>) {
       return {
         ...state,
-        selectedRegulatoryLayerIds: _.union(state.selectedRegulatoryLayerIds, action.payload),
-        showedRegulatoryLayerIds: _.union(state.showedRegulatoryLayerIds, action.payload)
+        selectedRegulatoryLayerIds: union(state.selectedRegulatoryLayerIds, action.payload),
+        showedRegulatoryLayerIds: union(state.showedRegulatoryLayerIds, action.payload)
       }
     },
 
@@ -43,10 +43,10 @@ const regulatorySlice = createSlice({
      * @param {number} action.payload - The regulatory zone id
      */
     hideRegulatoryLayer(state, action: PayloadAction<number>) {
-      state.showedRegulatoryLayerIds = _.without(state.showedRegulatoryLayerIds, action.payload)
+      state.showedRegulatoryLayerIds = without(state.showedRegulatoryLayerIds, action.payload)
     },
     hideRegulatoryLayers(state, action: PayloadAction<number[]>) {
-      state.showedRegulatoryLayerIds = _.without(state.showedRegulatoryLayerIds, ...action.payload)
+      state.showedRegulatoryLayerIds = without(state.showedRegulatoryLayerIds, ...action.payload)
     },
 
     /**
@@ -59,13 +59,13 @@ const regulatorySlice = createSlice({
     removeRegulatoryZonesFromMyLayers(state, action: PayloadAction<number[]>) {
       return {
         ...state,
-        selectedRegulatoryLayerIds: _.difference(state.selectedRegulatoryLayerIds, action.payload),
-        showedRegulatoryLayerIds: _.difference(state.showedRegulatoryLayerIds, action.payload)
+        selectedRegulatoryLayerIds: difference(state.selectedRegulatoryLayerIds, action.payload),
+        showedRegulatoryLayerIds: difference(state.showedRegulatoryLayerIds, action.payload)
       }
     },
 
     showRegulatoryLayer(state, action: PayloadAction<number | number[]>) {
-      state.showedRegulatoryLayerIds = _.uniq(_.concat(state.showedRegulatoryLayerIds, action.payload))
+      state.showedRegulatoryLayerIds = uniq(concat(state.showedRegulatoryLayerIds, action.payload))
     }
   }
 })

frontend/src/domain/use_cases/administrative/showAdministrativeLayer.ts

@@ -1,5 +1,5 @@
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
-import { find, flatten } from 'lodash'
+import { find, flatten } from 'lodash-es'
 import GeoJSON from 'ol/format/GeoJSON'
 import VectorImageLayer from 'ol/layer/VectorImage'
 import { bbox as bboxStrategy } from 'ol/loadingstrategy'

frontend/src/features/Administration/components/AdministrationTable/index.tsx

@@ -46,7 +46,7 @@ export function AdministrationTable() {
   }, [administrationTable.filtersState, administrations])
 
   const askForArchivingConfirmation = useCallback(
-    async (cellContext: CellContext<Administration.Administration, unknown>) => {
+    async (cellContext: CellContext<Administration.Administration, any>) => {
       const administration = cellContext.getValue<Administration.Administration>()
 
       const { data: canArchiveAdministration } = await dispatch(
@@ -65,7 +65,7 @@ export function AdministrationTable() {
   )
 
   const askForDeletionConfirmation = useCallback(
-    async (cellContext: CellContext<Administration.Administration, unknown>) => {
+    async (cellContext: CellContext<Administration.Administration, any>) => {
       const administration = cellContext.getValue<Administration.Administration>()
 
       const { data: canDeleteAdministration } = await dispatch(

frontend/src/features/Administration/components/AdministrationTable/slice.ts

@@ -1,5 +1,5 @@
 import { type PayloadAction, createSlice } from '@reduxjs/toolkit'
-import { set } from 'lodash/fp'
+import { set } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
@@ -32,7 +32,7 @@ const AdministrationTableSlice = createSlice({
         value: any
       }>
     ) {
-      state.filtersState = set(action.payload.key, action.payload.value, state.filtersState)
+      state.filtersState = set(state.filtersState, action.payload.key, action.payload.value)
     }
   }
 })

frontend/src/features/Administration/components/AdministrationTable/utils.tsx

@@ -8,8 +8,8 @@ import type { CellContext, ColumnDef } from '@tanstack/react-table'
 import type { Promisable } from 'type-fest'
 
 export function getAdministrationTableColumns(
-  askForArchivingConfirmation: (cellContext: CellContext<Administration.Administration, unknown>) => Promisable<void>,
-  askForDeletionConfirmation: (cellContext: CellContext<Administration.Administration, unknown>) => Promisable<void>,
+  askForArchivingConfirmation: (cellContext: CellContext<Administration.Administration, any>) => Promisable<void>,
+  askForDeletionConfirmation: (cellContext: CellContext<Administration.Administration, any>) => Promisable<void>,
   isArchived: boolean = false
 ): Array<ColumnDef<Administration.Administration>> {
   const archiveColumn: ColumnDef<Administration.Administration> = {
@@ -53,7 +53,7 @@ export function getFilters(
   data: Administration.Administration[],
   filtersState: FiltersState
 ): Filter<Administration.Administration>[] {
-  const customSearch = new CustomSearch(data, ['name'], {
+  const customSearch = new CustomSearch(structuredClone(data), ['name'], {
     cacheKey: 'BACK_OFFICE_ADMINISTRATION_LIST',
     isStrict: true,
     withCacheInvalidation: true

frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/utils.ts

@@ -1,5 +1,5 @@
 import { type ControlUnit } from '@mtes-mct/monitor-ui'
-import { sortBy } from 'lodash/fp'
+import { sortBy } from 'lodash-es'
 
 import { CONTROL_UNIT_CONTACT_PREDEFINED_NAMES } from './constants'
 
@@ -18,8 +18,8 @@ export function sortControlUnitContactsByQualifiedName(
   const customNamedContacts = controlUnitContacts.filter(
     ({ name }) => !CONTROL_UNIT_CONTACT_PREDEFINED_NAMES.includes(name)
   )
-  const sortedPredefinedNamedContacts = sortBy(['name'], predefinedNamedContacts)
-  const sortedCustomNamedContacts = sortBy(['name'], customNamedContacts)
+  const sortedPredefinedNamedContacts = sortBy(predefinedNamedContacts, ['name'])
+  const sortedCustomNamedContacts = sortBy(customNamedContacts, ['name'])
 
   return [...sortedPredefinedNamedContacts, ...sortedCustomNamedContacts]
 }

frontend/src/features/ControlUnit/components/ControlUnitDialog/index.tsx

@@ -6,7 +6,7 @@ import { DateRangeEnum } from 'domain/entities/dateRange'
 import { sideWindowPaths } from 'domain/entities/sideWindow'
 import { MissionFiltersEnum, resetMissionFilters, updateFilters } from 'domain/shared_slices/MissionFilters'
 import { Formik } from 'formik'
-import { noop } from 'lodash/fp'
+import { noop } from 'lodash-es'
 import { useCallback } from 'react'
 import styled from 'styled-components'