search

isamrish / gatsby-plugin-google-adsense

A Gatsby plugin to easily add a google adsense to your gatsby site
https://www.npmjs.com/package/@isamrish/gatsby-plugin-google-adsense
MIT License
11 stars 5 forks source link

Do NOT use this! #12

Open davwheat opened 3 years ago

davwheat commented 3 years ago

Do not use this plugin!

1. React is a dependency

This plugin has react as a dependency: it should not be. If you use this plugin, you'll end up with 2 different React packages in your bundle, increasing its size significantly.

2. You don't even need it!

Want ads? Copy .cache/default-html.js to your src folder, renaming it to html.js. Add your AdSense script tag to the head of that file. This replicates this plugin exactly.

luba-media commented 3 years ago

@davwheat I have installed the plugin, and then seen your comment. What is the right way to remove it including the react dependency?

These are the current dependencies in my package.json: "dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "babel-plugin-styled-components": "^1.12.0", "disqus-react": "^1.0.8", "gatsby": "^2.32.0", "gatsby-image": "^2.11.0", "gatsby-plugin-catch-links": "^2.10.0", "gatsby-plugin-compile-es6-packages": "^2.1.0", "gatsby-plugin-google-adsense": "^1.1.3", "gatsby-plugin-google-analytics": "^2.7.0", "gatsby-plugin-manifest": "^2.12.0", "gatsby-plugin-mdx": "^1.10.0", "gatsby-plugin-offline": "^3.10.0", "gatsby-plugin-page-creator": "^2.10.0", "gatsby-plugin-react-helmet": "^3.6.0", "gatsby-plugin-sharp": "^2.14.0", "gatsby-plugin-styled-components": "^3.10.0", "gatsby-remark-autolink-headers": "^2.11.0", "gatsby-remark-copy-linked-files": "^2.10.0", "gatsby-remark-images": "^3.11.0", "gatsby-remark-prismjs": "^3.13.0", "gatsby-remark-responsive-iframe": "^2.11.0", "gatsby-remark-smartypants": "^2.10.0", "gatsby-source-filesystem": "^2.11.0", "gatsby-transformer-remark": "^2.16.0", "gatsby-transformer-sharp": "^2.12.0", "prismjs": "^1.23.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", "styled-components": "^5.2.0", "terser": "^4.6.11" }, "devDependencies": { "lighthousebot": "https://github.com/GoogleChromeLabs/lighthousebot", "prettier": "^2.2.1", "puppeteer": "^5.4.1", "semantic-release": "^17.2.2", "yaml": "^1.6.0" }, "peerDependencies": { "gatsby": "^2.20.0", "react": "^17.0.0", "react-dom": "^17.0.0" } }

davwheat commented 3 years ago

@luba-media You just need to remove this plugin. Running yarn or npm i will updated your deps and fix the double React.

To be extra sure, use the Gatsby Webpack Bundle Analyzed plugin and build your site locally -- you should be able to see all your deps there and check there's no duplicate React.

By the way, if you want to cut down that bundle size more, check our the Gatsby Preact plugin. Preact is a smaller version of React and Preact can be an almost drop-in replacement unless you're doing VERY complex things with React.

rake7h commented 2 years ago

@IsAmrish moving react to the peer-dependancy should solve this problem.