GCI1234 Optimize browserlist tag in package.json #Javascript #RulesSpecifications #TERRE

Author: vluce

RULES.md

@@ -83,6 +83,7 @@ Some are applicable for different technologies.
 |          | Resize images browser-side                                        | Do not resize images using the HEIGHT and WIDTH attributes of the HTML code. This approach requires transferring these images to their original size, wasting bandwidth and CPU cycles.                                                                                                                                                                                                                                       | [cnumr best practices (3rd edition) BP_034](https://github.com/cnumr/best-practices/blob/main/chapters/BP_034_fr.md)                                                    | 🚫   | 🚫  | 🚧 | 🚫     | 🚫   | 🚫 | 🚀   |
 |          | Modify the DOM when traversing it                                 | Modifying the DOM (Document Object Model) as you traverse it can lead to situations where the loop becomes very resource-intensive, especially CPU cycles.                                                                                                                                                                                                                                                                    | [cnumr best practices (3rd edition) BP_041](https://github.com/cnumr/best-practices/blob/main/chapters/BP_041_fr.md)                                                    | 🚫   | 🚫  | 🚧 | 🚫     | 🚫   | 🚫 | 🚫   |
 |          | Edit DOM elements to make it invisible                            | When an element of the Document Object Model (DOM) needs to be modified by several properties, each change in style or content will generate a repaint or reflow.                                                                                                                                                                                                                                                             | [cnumr best practices (3rd edition) BP_042](https://github.com/cnumr/best-practices/blob/main/chapters/BP_042_fr.md)                                                    | 🚫   | 🚫  | 🚀 | 🚫     | 🚫   | 🚫 | 🚫   |
+| GCI1234  | Optimize browserlist tag in package.json                          | Determine the target browsers for yor application and configure the browserlists in package.json accordingly.                                                                                                                                                                                                                                                                                                                 |                                                                                                                                                                         | 🚫   | 🚫  | 🚧 | 🚫     | 🚫   | 🚫 | 🚫   |
 
 ## Rules to be reworked / measured / clarified
 

src/main/rules/GCI1234/GCI1234.json

@@ -0,0 +1,16 @@
+{
+  "title": "Browserlist Tag Optimization",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "sobriety",
+    "creedengo",
+    "environment",
+    "eco-design"
+  ],
+  "defaultSeverity": "Info"
+}

src/main/rules/GCI1234/javascript/GCI1234.asciidoc

@@ -0,0 +1,42 @@
+:!sectids:
+
+== Why is this an issue?
+
+When using webpack the bundle is configured with the browserfile tag in the package.json file.
+Optimize the browserfile to only target the browser you want to serve and avoid some polyfill script which can unnecessarily make your package bigger.
+
+2 configurations can be distinguished :
+* Intranet : You know which browser are used in your company. So you can reduce the list of allowed browsers. For example, you can just allow edge and chrome, your bundle (build package) will be smaller.
+* Internet : You should allow a maximum of browsers, your bundle will include polyfill scripts and be bigger but will serve the most part of browsers types.
+
+https://browsersl.ist/
+
+[source,typescriptjsx,data-diff-id="1",data-diff-type="noncompliant"]
+----
+```json
+"browserslist": {
+    "defaults"
+}
+```
+----
+
+[source,typescriptjsx,data-diff-id="1",data-diff-type="compliant"]
+----
+```json
+"browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+}
+```
+----
+
+
+== Resources
+
+=== Documentation
+
+
+=== Articles & blog posts