bundle size is more than 1MB

[ajay28kumar]

Do you want to request a feature or report a bug? bug

What is the current behaviour? when I run preact build --no-prerender --service-worker=false --template src/template.html then my bundle file is including __tests__/*.js folders, as well as other partial exports files and unused files from my application and it's creating bundle.js size 1.2mb(un gzipped )

If the current behaviour is a bug, please provide the steps to reproduce.

What is the expected behaviour? Ideally, my bundle.js should be adding only for imported files into component/app.js

If this is a feature request, what is motivation or use case for changing the behaviour? No Please mention other relevant information. my package.json files look like this:

   ...
    "scripts": {
        "build": "sh -ac '. ./.env.${PREACT_APP_ENV}; preact build --no-prerender  --service-worker=false --template src/template.html'",
        "build:production": "PREACT_APP_ENV=production npm run build",
        "test": "NODE_ENV=test jest --no-cache --coverage",
        "test:watch": "NODE_ENV=test jest --verbose --watch",
    },
   ...

and my preact.config.js looks like this:

import envVars from 'preact-cli-plugin-env-vars';
const WorkboxPlugin = require('workbox-webpack-plugin');

export default (config, env, helpers) => {
    process.env.PREACT_APP_ENV_NAME = process.env.PREACT_APP_ENV_NAME ? process.env.PREACT_APP_ENV_NAME : 'dev';
    envVars(config, env, helpers);
    config.plugins.push(
        new WorkboxPlugin.InjectManifest({
            swSrc: './service-worker.js',
            swDest: './service-worker.js',
            include: [/\.png$/, /\.ico$/],
        })
    );
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
        react: 'preact/compat',
        'react-dom': 'preact/compat'
    });

    return config;
};

dependencies of Preact: "preact": "^10.0.5", "preact-async-route": "^2.2.1", "preact-router": "^3.1.0",

Please paste the results of preact info here.

         ▄▄
     ▄▄▓▓▓▓▓▓▄▄
  ▄█▀▀█▓▓▓▓▓▓▓▀▀█▄▄
▐▓▌▐▓▓▓▒▄ ▀▄▄▓▓▓▌▐▓▌ 
▐▓▓▄▀▓▀ ▄▓▓▄▄▀▓▓ ▓▓▌ 
▐▓▓▓▌ ▒▓▌  ▐▓▓  ▓▓▓▌ preact-cli 2.2.1
▐▓▓ ▒▓▄▄▀▓▓▀ ▄▓▓ ▓▓▌
▐▓▌▐▓▓▓▀▀▄▄▀▀▓▓▓▌▐▓▌
  ▀█▄▄▒▓▓▓▓▓▓▒▄▄▒▀
      ▀▓▓▓▓▓▓▀▀
         ▀▀
For help with a specific command, enter:
  preact help [command]

Commands:
  create [template] [dest]  Create a new application.
  build [src] [dest]        Create a production build in build/
  watch [src]               Start a development live-reload server.
  serve [dir]               Start an HTTP2 static fileserver.
  list                      List all official templates

Options:
  -h, --help  Show help                                                [boolean]

Unknown argument: info

@prateekbh, @ForsakenHarmony can you guide me here if something I'm doing wrong here

[maxmilton]

Do you have a link to your code repo or a minimal reproducible case? It would make diagnosing the issue a lot easier.

[lukeed]

Are you importing some of these test files within your source? If so, then that's telling Webpack to follow the link(s).

You can try including a config block for webpack.IgnorePlugin. I would think that if you get an error after this, you will then be able to find where/how those files are being imported.

[ajay28kumar]

@MaxMilton sorry, It's private repo so I can't share that. The weird issue I'm finding it here that If I create a Component and do not use anywhere in the application then still it's becoming part of bundle.js. Ideally, it should not be part of any of the chunk. Maybe I need to make some changes for preact-config

[developit]

@ajay28kumar a few questions to try to narrow things down:

• are you using require.context anywhere?
• are you using dynamic require? (require("foo" + x + "bar"))
• is that your entire preact.config.js?
• are you using TypeScript?
• please paste the output of npm ls --depth 0

Preact CLI on its own will never bundle files that aren't specifically imported. We don't even auto-load routes from the filesystem, everything gets into the bundle exclusively through import and require.

[ajay28kumar]

Solution: Any file/folder is part of src/routes will be added in the main.js bundle files. just created routes/__tests__ and migrated test file here then I got correct and expected bundle size