Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#8535: Additional improvement on the main bundle #8531

Merged
merged 9 commits into from
Sep 2, 2022
Merged

#8535: Additional improvement on the main bundle #8531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
244d3c6
additional improvement on the main bundle
allyoucanmap Aug 31, 2022
1ea2ddb
remove leaflet lib placeholder
allyoucanmap Aug 31, 2022
9965bfa
fix failing tests
allyoucanmap Sep 1, 2022
92c10c4
update project html templates
allyoucanmap Sep 1, 2022
4cb6a29
add html optimization doc to migration guidelines
allyoucanmap Sep 1, 2022
d10338a
Update docs/developer-guide/mapstore-migration-guide.md
allyoucanmap Sep 1, 2022
d9b83e0
Update web/client/components/misc/withSuspense.jsx
allyoucanmap Sep 1, 2022
56c84f5
Update web/client/components/styleeditor/Editor.jsx
allyoucanmap Sep 1, 2022
dbbb281
fixes from review
allyoucanmap Sep 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion build/buildConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
37 changes: 37 additions & 0 deletions docs/developer-guide/mapstore-migration-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
6 changes: 1 addition & 5 deletions project/standard/templates/api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 1 addition & 5 deletions project/standard/templates/apiTemplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 1 addition & 5 deletions project/standard/templates/dashboard-embedded-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
6 changes: 1 addition & 5 deletions project/standard/templates/dashboard-embedded.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 1 addition & 5 deletions project/standard/templates/embedded.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
30 changes: 14 additions & 16 deletions project/standard/templates/embeddedTemplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
30 changes: 14 additions & 16 deletions project/standard/templates/geostory-embedded-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 1 addition & 5 deletions project/standard/templates/geostory-embedded.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 1 addition & 5 deletions project/standard/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 5 additions & 8 deletions project/standard/templates/indexTemplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -105,7 +101,8 @@
window.location.href = "unsupportedBrowser.html"
document.querySelector("container").style.display = "none";
}
</script>
}
</script>
</head>
<body>
<div id="container">
Expand Down
4 changes: 0 additions & 4 deletions web/client/api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 0 additions & 4 deletions web/client/apiTemplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading