GCI1234 [Team TERRE][2025] - Optimize browserlist tag in package.json #Javascript #RulesSpecifications

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- [#408](https://github.com/green-code-initiative/creedengo-rules-specifications/pull/408) Add rule GCI1234 - Optimize browserslist in package.json
+
 ### Changed
 
 - Correction of various typos in rules documentations

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 browserslist tag in package.json                         | Determine the target browsers for yor application and configure the browserslist in package.json accordingly.                                                                                                                                                                                                                                                                                                                 |                                                                                                                                                                         | 🚫   | 🚫  | 🚧 | 🚫     | 🚫   | 🚫 | 🚫   |
 
 ## Rules to be reworked / measured / clarified
 

src/main/rules/GCI1234/GCI1234.json

@@ -0,0 +1,20 @@
+{
+  "title": "Browserslist Tag Optimization",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "sobriety",
+    "creedengo",
+    "environment",
+    "eco-design"
+  ],
+  "defaultSeverity": "Medium",
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

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 browsers 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 browsers 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