Remove duplicate modules in JavaScript bundles

raoabdullah07 commented 2 years ago

Description

I've checked the score of my AMP pages with Google PageSpeed Insight, and I've got the following red message "Remove duplicate modules in JavaScript bundles"

This is the initial piece of code of my AMP pages. I started with them several years ago. Not sure if I have to remove something now.

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>Full SEO Guide 2020 - On Site SEO - On Page SEO - Off Page SEO Tips</title>
    <link rel="canonical" href="#">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <link rel="canonical" href="#">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
    <meta name="forntEnd-Developer" content="Abdullah Yousaf">
    <meta property="og:type" content="website ">
    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="#336699"/>
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#336699">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#336699">
    <meta name="description" content="SmSEO is specially developed for Social Media &amp; Search Engine Optimization Guide. More than 200 SEO Ranking Factors are explained to guide you about On-Site SEO, On-Page SEO, Off-Page SEO, &amp; how to rank a website in Google Search Engine." />
<!--amp- form-->
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!--accordian-->
    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<!--scroll to top-->
    <script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
    <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

Checking the code of my AMP pages, I see that the 'amp-sidebar' is called just in the following pieces of code:

Reproduction Steps

https://stackoverflow.com/questions/69491974/google-amp-duplicate-js-module-in-html-google-amp-html-at-google-pagespeed-i

Relevant Logs

n/a

Browser(s) Affected

Chrome

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

V0.1

westonruter commented 2 years ago

Closely related to #28638 where PSI suggests to remove unused JavaScript.

See https://github.com/ampproject/amphtml/issues/28638#issuecomment-772902291 from @kristoferbaxter:

Efforts are ongoing to reduce the size of AMP's JavaScript payloads, including Bento, AMP Compiler, and Module/NoModule mode.

I think the issue of duplicate modules could only be solved by utilizing ES module imports rather than bundling the duplicate modules in each extension binary. With the removal of IE11 support and the implementation of module scripts, I believe this is now a possibility.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

ampproject / amphtml