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

Author: maximeperrault

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/utils/getLastIdFromCollection.ts

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

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

@@ -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/api/googlePlacesAPI/googlePlacesAPI.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/api/nominatimAPI.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/Administrative.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/Amp.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))
     }
   }
 })