#8535: Additional improvement on the main bundle (#8531)

geosolutions-it · Sep 2, 2022 · a7c626b · a7c626b
1 parent 20ca575
commit a7c626b
Show file tree

Hide file tree

Showing 76 changed files with 818 additions and 2,763 deletions.
diff --git a/build/buildConfig.js b/build/buildConfig.js
@@ -175,7 +175,6 @@ module.exports = (...args) => mapArgumentsToObject(args, ({
         new ProvidePlugin({
             Buffer: ['buffer', 'Buffer']
         }),
-        new NormalModuleReplacementPlugin(/leaflet$/, path.join(paths.framework, "libs", "leaflet")),
         new NormalModuleReplacementPlugin(/proj4$/, path.join(paths.framework, "libs", "proj4")),
         // it's not possible to load directly from the module name `cesium/Build/Cesium/Widgets/widgets.css`
         // see https://github.com/CesiumGS/cesium/issues/9212

diff --git a/docs/developer-guide/mapstore-migration-guide.md b/docs/developer-guide/mapstore-migration-guide.md
@@ -22,6 +22,43 @@ This is a list of things to check if you want to update from a previous version
 
 ## Migration from 2022.01.02 to 2022.02.00
 
+### HTML pages optimization
+
+We removed script and css link to leaflet CDN in favor of a dynamic import of the libraries in the main bundle, now leaflet is only loaded when the library is selected as map type of the viewer. You can update the project HTML files by removing these tags:
+
+```diff
+- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
+- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+<link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
+<!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
+- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
+- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+```
+
+We also made asynchronous the script to detect valid browser. This should slightly improve the initial requests time.
+ You can updated the script in your project as following:
+
+
+```html
+<script async type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js" onload="checkBrowser()"></script>
+<script type="text/javascript">
+    function checkBrowser() {
+        var browserInfo = bowser.getParser(window.navigator.userAgent);
+        var isValidBrowser = browserInfo.satisfies({
+            "edge": ">1",
+            "chrome": ">1",
+            "safari": ">1",
+            "firefox": ">1"
+        });
+        if (!isValidBrowser) {
+            window.location.href = "unsupportedBrowser.html"
+            document.querySelector("container").style.display = "none";
+        }
+    }
+</script>
+```
+
 ### Version plugin has been removed
 
 We no longer maintain the Version plugin since we have moved its content inside the About plugin (see [here](https://github.com/geosolutions-it/MapStore2/issues/7934#issuecomment-1201433942) for more details)

diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "@geosolutions/jsdoc": "3.4.4",
     "@geosolutions/mocha": "6.2.1-3",
     "@mapstore/eslint-config-mapstore": "1.0.5",
+    "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "1.16.0",
     "babel-loader": "8.0.5",
     "babel-plugin-add-module-exports": "0.1.4",
@@ -162,7 +163,6 @@
     "colorbrewer": "1.0.0",
     "connected-react-router": "6.3.2",
     "create-react-class": "15.6.3",
-    "css-tree": "1.0.0-alpha24",
     "draft-js": "0.11.0",
     "draft-js-inline-toolbar-plugin": "3.0.1",
     "draft-js-plugins-editor": "2.1.1",

diff --git a/project/standard/templates/api.html b/project/standard/templates/api.html
@@ -7,13 +7,9 @@
         <title>__PROJECTDESCRIPTION__</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <style>
         #container {
             position: absolute;

diff --git a/project/standard/templates/apiTemplate.html b/project/standard/templates/apiTemplate.html
@@ -7,13 +7,9 @@
         <title>__PROJECTDESCRIPTION__</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <style>
         #container {
             position: absolute;

diff --git a/project/standard/templates/dashboard-embedded-template.html b/project/standard/templates/dashboard-embedded-template.html
@@ -95,11 +95,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <script type="text/javascript">
             var browserInfo = bowser.getParser(window.navigator.userAgent);
             var isValidBrowser = browserInfo.satisfies({

diff --git a/project/standard/templates/dashboard-embedded.html b/project/standard/templates/dashboard-embedded.html
@@ -95,11 +95,7 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
     </head>
     <body>
         <div id="container">

diff --git a/project/standard/templates/embedded.html b/project/standard/templates/embedded.html
@@ -84,13 +84,9 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
     </head>
     <body>
         <div id="container">

diff --git a/project/standard/templates/embeddedTemplate.html b/project/standard/templates/embeddedTemplate.html
@@ -84,25 +84,23 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
-        <script type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js"></script>
+        <script async type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js" onload="checkBrowser()"></script>
         <script type="text/javascript">
-            var browserInfo = bowser.getParser(window.navigator.userAgent);
-            var isValidBrowser = browserInfo.satisfies({
-                "edge": ">1",
-                "chrome": ">1",
-                "safari": ">1",
-                "firefox": ">1"
-            });
-            if (!isValidBrowser) {
-                window.location.href = "unsupportedBrowser.html"
-                document.querySelector("container").style.display = "none";
+            function checkBrowser() {
+                var browserInfo = bowser.getParser(window.navigator.userAgent);
+                var isValidBrowser = browserInfo.satisfies({
+                    "edge": ">1",
+                    "chrome": ">1",
+                    "safari": ">1",
+                    "firefox": ">1"
+                });
+                if (!isValidBrowser) {
+                    window.location.href = "unsupportedBrowser.html"
+                    document.querySelector("container").style.display = "none";
+                }
             }
         </script>
     </head>

diff --git a/project/standard/templates/geostory-embedded-template.html b/project/standard/templates/geostory-embedded-template.html
@@ -94,24 +94,22 @@
     </style>
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
     <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
-    <script src="https://maps.google.com/maps/api/js?v=3"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js"></script>
+    <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
+    <script async type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js" onload="checkBrowser()"></script>
     <script type="text/javascript">
-        var browserInfo = bowser.getParser(window.navigator.userAgent);
-        var isValidBrowser = browserInfo.satisfies({
-            "edge": ">1",
-            "chrome": ">1",
-            "safari": ">1",
-            "firefox": ">1"
-        });
-        if (!isValidBrowser) {
-            window.location.href = "unsupportedBrowser.html"
-            document.querySelector("container").style.display = "none";
+        function checkBrowser() {
+            var browserInfo = bowser.getParser(window.navigator.userAgent);
+            var isValidBrowser = browserInfo.satisfies({
+                "edge": ">1",
+                "chrome": ">1",
+                "safari": ">1",
+                "firefox": ">1"
+            });
+            if (!isValidBrowser) {
+                window.location.href = "unsupportedBrowser.html"
+                document.querySelector("container").style.display = "none";
+            }
         }
     </script>
 </head>

diff --git a/project/standard/templates/geostory-embedded.html b/project/standard/templates/geostory-embedded.html
@@ -94,12 +94,8 @@
     </style>
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
     <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
-    <script src="https://maps.google.com/maps/api/js?v=3"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+    <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
 </head>
 <body>
 <div id="container">

diff --git a/project/standard/templates/index.html b/project/standard/templates/index.html
@@ -84,14 +84,10 @@
         </style>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
-        <script src="https://maps.google.com/maps/api/js?v=3"></script>
+        <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <!--<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=__API_KEY_MAPQUEST__"></script>-->
     </head>
     <body>

diff --git a/project/standard/templates/indexTemplate.html b/project/standard/templates/indexTemplate.html
@@ -84,16 +84,12 @@
       </style>
       <link rel="preconnect" href="https://fonts.gstatic.com">
       <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
       <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
-      <script src="https://maps.google.com/maps/api/js?v=3"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
-      <script type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js"></script>
+      <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
+      <script async type="text/javascript" src="https://unpkg.com/bowser@2.7.0/es5.js" onload="checkBrowser()"></script>
       <script type="text/javascript">
+        function checkBrowser() {
             var browserInfo = bowser.getParser(window.navigator.userAgent);
             var isValidBrowser = browserInfo.satisfies({
                 "edge": ">1",
@@ -105,7 +101,8 @@
                 window.location.href = "unsupportedBrowser.html"
                 document.querySelector("container").style.display = "none";
             }
-        </script>
+        }
+      </script>
   </head>
   <body>
       <div id="container">

diff --git a/web/client/api.html b/web/client/api.html
@@ -7,13 +7,9 @@
         <title>Page with MapStore API</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <style>
         #container {
             position: absolute;

diff --git a/web/client/apiTemplate.html b/web/client/apiTemplate.html
@@ -7,13 +7,9 @@
         <title>Page with MapStore API</title>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
         <!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <style>
         #container {
             position: absolute;