I have a create-react-app project, and I am working on reducing my bundled JS file size. About half of my bundle size is coming from a dependency called MDBReact (a react component library), and majority of it is not being used. I am trying to find out how/if I can remove dead code with tree shaking from the bundled build. I have been looking into this for a while and the closest article I found was this. This article leaves me confused and it does not give any explanation into how or if it can be done. I also found this guide on webpack tree shaking explaining how it can be done, but this does not seem to solve the problem.
CRA is using webpack to bundle code. Webpack can only treeshake es modules by default and commonjs modules when using plugins.
To help you on the way, how are you currently importing from MDBReact?
It looks like MDBReact is not written in es modules and webpack is therefore going to have a hard time tree shaking if you use the following import statement:
import { module } from 'MDBReact';
Instead you could try to import using the following
import modules from 'MDBReact/module';
You might have to change the path to the module depending on how MDBReact is structured. Take a look in the node_modules folder to find out.
Related
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
I'm working on a React project using babel '#babel/preset-env' & '#babel/preset-react' and trying to optimise my output file with Terser plugin too.
After reading docs here there and everywhere I cannot for the love of me figure out how to shorten these names __WEBPACK_IMPORTED_MODULE__ __webpack_require__ etc. Why cant they be shorter?!
I believe I've followed tree shaking protocols making sure I'm using import { function } instead of import Everything and even looked at webpacks' optimization.moduleIds to see if that would help but no avail.
Any suggestions on how I can minimise the footprint of webpack in this production build please?
I am new to Electron, and I have been having some trouble trying to do something simple in an Electron + React application. All I want to do is: Load a 3D model (.glb) located in my src/assets directory from a React component. I created the project using this guide. In a typical React project, I can just import the file directly in my JS module and reference the path in my code. However, with the default Webpack config, the file can't be found. There's obviously a gap in my understanding on how React + Webpack work when loading assets. What am I missing? Any help is greatly appreciated.
Thanks!
Turns out, the Webpack documentation spells out the answer clearly. Who knew? I found a lot of similar questions/answers for older versions of Webpack, so I'll post one here for Webpack 5. It requires a trivial two-line addition to the webpack.rules.js file:
{
test: /\.(png|jpg|gif|svg|glb)$/,
type: 'asset/resource'
}
The key is the asset/resource line. It's new to Webpack 5 and allows the bundling of assets without needing any additional loaders. With that, assets can be included as Javascript modules and Webpack will take care of the rest.
So, one can do:
import modelSrc from "../assets/some_awesome_model.glb";
And that's that. Webpack will spit out a URL such as /9feee593dc369764dd8c.glb, meaning Webpack has located and processed the asset.
Building a component with Reason and React always gives me an module import statement for "react", which cannot be found if React is included from a CDN. Is there a solution for this? I've tried to define window.react = React in index.html without success. es6-global setting does not change anything.
I'm not using a bundling program like webpack.
Edit: Possibly relevant thread from Reason forum: https://reasonml.chat/t/can-one-load-reasonml-es6-modules-without-a-bundler/2219
Similar issue (not resolved): can one load reasonml es6 modules without a bundler
importmap (not yet implemented in browsers) could be another solution for this: Using ES6 Modules without a Transpiler/Bundler step
Technically, yes you can, but it's not going to be as easy as going with the npm flow and using a bundler.
The ReasonReact bindings are written in a way that produces output JavaScript that imports modules like:
import * as React from "react";
(If using ES6 module style.)
If using a CDN you would probably want an output that looks like this:
import * as React from "https://some.cdn/react";
The syntax (from the ReasonReact repo) that controls the output JS is:
[#bs.module "react"]
external createElement: (component('props), 'props) => element = "createElement";
If you changed it to:
[#bs.module "https://some.cdn/react"]
external createElement: (component('props), 'props) => element = "createElement";
...then you'd get the desired output. But the problem is then you need to change the sources ... i.e. maintain or find forked bindings for React for that CDN. Or set up some code automation that does a find-and-replace of [#bs.module "react"] with [#bs.module "https://some.cnd/react"]. So either way, it's not as simple as using a bundler.
Is it possible to use react with ReactRouter, without using browserify or webpack.
I am following the documentation from http://rackt.github.io/react-router they require react and react-router (require('react-router');). If I use browerifly my generated bundle is about 1MB filesize, which sounds like a lot.
So is it possible to get reactrouter working with including compiled JS from a CDN like https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js, instead of bundle all requirements by myself ? If i try to make it work with a CDN, I get an error that Route is not defined. But it looks like it is exported in the cdn file.
I would like to compile my JSX/ES6 react components include the ReactRouter and react JS-files from a cdn and only bundle my components into a new js file.
Is this possible or is browserify and webpack the right way to setup the project ? (I looked at several github repos). I got some doubts because there is no installation guide on http://rackt.github.io/react-router/
like this pseudo html:
<head>
CND :include react, react-router
my code combinded.js
</head>
When you're using the prebuilt version from the CDN, the library is exported onto window.ReactRouter. So, Route is defined on window.ReactRouter.Route.
Since React Router also depends on React, using the CDN/browser build will also require that React is available on window.React.
That said, the CDN version you linked to is, itself, generated with webpack, so I don't expect that you'd gain any file size improvements. You might look into minification/dead code elimination on your browserify bundle to see if it decreases the file size.
One additional info I want to share is the possibility to use externals (https://webpack.github.io/docs/library-and-externals.html) in webpack config.
I use it as following:
externals: {
"react": "React",
"react/addons": "React",
"reflux" : "Reflux"
}
this results in a smaller bundle and you can use react from a CDN as asked in my question. This also decreases the buildtime with gulp.