question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bundle size is more than 1MB

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
ajay28kumarcommented, Feb 3, 2020

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

0reactions
developitcommented, Jan 29, 2020

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Small Bundles, Fast Pages: What To Do With Too Much ...
This post will explain why bundle size matters and recommend tools and processes you can follow to monitor, visualise, and most importantly,Β ...
Read more >
Slimming down your bundle size - LogRocket Blog
Let's see if there is anything we can do about that, to help us slim down our total bundle size.
Read more >
Is there any limit of bundle in Android? - Stack Overflow
The Binder transaction buffer has a limited fixed size, currently 1Mb, which is shared by all transactions in progress for the process.
Read more >
Optimize Angular bundle size in 4 steps | by Siyang Kern Zhao
I checked many apps built with Angular and have a feeling that most medium size enterprise apps should have main.*.js under 500 KB,...
Read more >
3 ways to reduce webpack bundle size - Jakob Lind
How to analyze the output: Are some dependencies larger than you thought? Could you replace them with a minimalistic or more specialized alternative...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found