0

I have a file where I'm exporting multiple consts with arrays of children called icons.js.

In another react file, lets call it CloseButton.js. I'm only importing

import { cross } from './icons.js';

and when I run webpack with production mode enabled, all the other icons appear to be imported as well (the icons.js const exports amount to close to 100kB or so, but a single line shouldnt be larger than 1kB) to the transpiled CloseButton.js.

I am using webpack 4.30.0 with @babel/preset-env and @babel/preset-react.

webpack.config.js

const config = {
  entry: './CloseButton.js',
  output: {
    filename: 'CloseButton.js',
  },
  plugins: [],
  module: {
    rules: [
      {
        test: /\.js/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              modules: false
            }], '@babel/preset-react']
          }
        }
      }
    ]
  },
  mode: 'production'
};

module.exports = config;

I tested to run the same setup but only exports strings from icons.js, and then the code was properly excluding dead code.

Does anybody know if there's a way to only export "cross" from the icons.js file without creating a separate file for each react component defined in icons.js?

I've tested removing all references of consts being exported as React components from icons.js and that works, but that doesn't let me export the icons.

kachiem
  • 1
  • I personally store icons in separate files, eg.. `/icons/cross.js`, You then don't need to worry about tree-shaking,. And small maintainable javascript files in the long run has other benefits too. – Keith Apr 23 '19 at 14:00
  • Might make sense to split it up, the icons.js file is automatically generated at the moment through a script that reads a bunch of svg files from a folder. – kachiem Apr 23 '19 at 14:23
  • How is each icon exported, for tree shaking I think it needs to be `export icon1; export icon2;` etc, and not like -> `export default icons` – Keith Apr 23 '19 at 14:34
  • Hi Keith, the icons are exported in the following manner: `export const icon1;`, `export const icon2;`. – kachiem Apr 24 '19 at 06:49
  • I do know that the solution of splitting the file up would work, but i'm just asking if the treeshaking not working is an issue for all files that are exporting multiple react components or is it specifically something i'm doing wrong with my react component exports? – kachiem Apr 24 '19 at 07:45
  • Have you tried -> `"sideEffects": false` in your config.? – Keith Apr 24 '19 at 09:19

1 Answers1

0

I figured out the issue, basically I was setting the react components directly on the export const myicon = [<path></path>, <path />]; Instead it needs to of course be wrapped with a function call.

such as: ```export const myicon = ()=> {

return ([, ]) }```

kachiem
  • 1