search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

Is it normal to have almost 6mb of node_modules with @babel? #26181

Closed dev-b01 closed 4 years ago

dev-b01 commented 4 years ago

Summary

Trying to optimise my site I ran webpack bundle analyzer v2. I does not make sense to me that @babel would normally take up this much space, but perhaps this is normal?

Relevant information

Screenshot 2020-08-01 at 18 19 40
herecydev commented 4 years ago

Not at all, that's far too high. Can you put together a reproduction?

herecydev commented 4 years ago

From what I can see it's mostly @babel/types which are consuming the space, but I'm not sure what dependencies you've installed that might be bringing this into the package.

dev-b01 commented 4 years ago

I went back to the gatsby starter I used as a starting point to create a bug-repo, added the bundle analyzer and now it makes more sense. https://github.com/renvrant/gatsby-mdx-netlify-cms-starter I forgot this project has mdxjs-runtime dependency in it that creates a lot of overhead.

The bundle analyzer "treemap stat" tab would have given that away in the analyzer which I missed the first time I used it.

dev-b01 commented 4 years ago

Update: I was able to use the mdx runtime in the cms environment and reduce main bundle size (10x) as a result of that! For anyone else facing this issue, in onCreateWebpackConfig you can sell webpack to exclude it by using:

actions.setWebpackConfig({
...
plugins: [
        new webpack.IgnorePlugin({
          resourceRegExp: /^@mdx-js\/runtime$/
        })
      ]

You can toggle between pre-processed mdx and the unprocessed live markdown using the isPreview prop passed in from netlifycms preview templated