tech: add minifying, treeshake and replace lodash per lodash-es (tree…

…shake)

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/package.json

@@ -32,7 +32,6 @@
     "@sentry/browser": "8.54.0",
     "@sentry/react": "8.54.0",
     "@sentry/tracing": "7.120.3",
-    "@sentry/vite-plugin": "2.22.7",
     "@svgr/webpack": "8.1.0",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.12.0",
@@ -45,7 +44,7 @@
     "hammerjs": "2.0.8",
     "imask": "7.6.1",
     "jsts": "2.12.1",
-    "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
     "oidc-client-ts": "2.4.1",
     "ol": "10.4.0",
     "ol-mapbox-style": "12.3.3",
@@ -87,6 +86,7 @@
     "@types/google.maps": "3.58.1",
     "@types/jest": "29.5.14",
     "@types/node": "20.9.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",
@@ -127,6 +127,7 @@
     "prettier": "2.7.1",
     "puppeteer": "22.12.1",
     "ramda": "0.30.1",
+    "rollup-plugin-visualizer": "5.14.0",
     "type-fest": "4.33.0",
     "typescript": "5.7.3",
     "vite": "6.1.0",

frontend/src/api/googlePlacesAPI/googlePlacesAPI.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import { throttle } from 'lodash-es'
 import { useEffect, useState, useMemo, useRef, type MutableRefObject } from 'react'
 
 import { loadGoogleMapScript } from './utils'
@@ -52,7 +52,7 @@ export const useGooglePlacesAPI = search => {
   }, [])
 
   const throttledSearch = useMemo(() => {
-    const throttled = _.throttle(
+    const throttled = throttle(
       async query => {
         if (abortControlerRef.current) {
           abortControlerRef.current.abort()

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/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,6 +1,6 @@
 import { customDayjs } from '@mtes-mct/monitor-ui'
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import { isEqual, omit } from 'lodash'
+import { isEqual, omit } from 'lodash-es'
 import { 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/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/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'
 

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

@@ -10,7 +10,7 @@ import {
 } from '@mtes-mct/monitor-ui'
 import { skipToken } from '@reduxjs/toolkit/query'
 import { Formik } from 'formik'
-import { sortBy } from 'lodash/fp'
+import { sortBy } from 'lodash-es'
 import { useCallback, useMemo } from 'react'
 import { useNavigate, useParams } from 'react-router'
 import styled from 'styled-components'
@@ -62,11 +62,11 @@ export function ControlUnitForm() {
     () =>
       departmentAreas
         ? sortBy(
-            ['label'],
             departmentAreas.map(departmentArea => ({
               label: `${departmentArea.inseeCode} - ${departmentArea.name}`,
               value: departmentArea.inseeCode
-            }))
+            })),
+            ['label']
           )
         : undefined,
     [departmentAreas]

frontend/src/features/ControlUnit/components/ControlUnitListDialog/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 controlUnitListDialogSlice = 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/ControlUnit/components/ControlUnitTable/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'
 
@@ -33,7 +33,7 @@ const controlUnitTableSlice = 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/ControlUnit/utils.ts

@@ -6,7 +6,7 @@ import {
   pluralize,
   getControlUnitResourceCategoryFromType
 } from '@mtes-mct/monitor-ui'
-import { isEmpty, uniq } from 'lodash/fp'
+import { isEmpty, uniq } from 'lodash-es'
 
 import { isNotArchived } from '../../utils/isNotArchived'
 

frontend/src/features/Dashboard/components/DashboardForm/Amps/ListLayerGroup.tsx

@@ -6,7 +6,7 @@ import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Icon, IconButton, THEME } from '@mtes-mct/monitor-ui'
 import { getTitle } from 'domain/entities/layers/utils'
-import { intersection } from 'lodash'
+import { intersection } from 'lodash-es'
 import { useState } from 'react'
 import styled from 'styled-components'
 

frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx

@@ -4,7 +4,7 @@ import { Dashboard } from '@features/Dashboard/types'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
-import { groupBy } from 'lodash'
+import { groupBy } from 'lodash-es'
 import { forwardRef, useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 

frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx

@@ -1,7 +1,7 @@
 import { dashboardActions } from '@features/Dashboard/slice'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { Textarea } from '@mtes-mct/monitor-ui'
-import { debounce } from 'lodash'
+import { debounce } from 'lodash-es'
 import { forwardRef, useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 

frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/ListLayerGroup.tsx

@@ -6,7 +6,7 @@ import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Icon, IconButton, THEME } from '@mtes-mct/monitor-ui'
 import { getTitle } from 'domain/entities/layers/utils'
-import { intersection } from 'lodash'
+import { intersection } from 'lodash-es'
 import { useState } from 'react'
 import styled from 'styled-components'
 

frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx

@@ -4,7 +4,7 @@ import { Dashboard } from '@features/Dashboard/types'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
-import { groupBy } from 'lodash'
+import { groupBy } from 'lodash-es'
 import { forwardRef, useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 

frontend/src/features/Dashboard/components/DashboardForm/ToggleSelectAll/utils.tsx

@@ -1,5 +1,5 @@
 import { Accent, Icon, IconButton, THEME } from '@mtes-mct/monitor-ui'
-import { difference, intersection } from 'lodash'
+import { difference, intersection } from 'lodash-es'
 
 import type { SelectionState } from '.'
 import type { Dashboard } from '@features/Dashboard/types'

frontend/src/features/Dashboard/components/DashboardForm/slice.ts

@@ -1,7 +1,7 @@
 import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'
 import { DateRangeEnum } from 'domain/entities/dateRange'
 import { ReportingTypeEnum, StatusFilterEnum } from 'domain/entities/reporting'
-import { set } from 'lodash'
+import { set } from 'lodash-es'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'