Ncc: [help] how to tree shaking?

[unix]

Too much unused code has been added to the package. for example, if i import typeorm, the package will increase by 5000k.

option --external does not to solve this issue, what should i do?

thanks.

[styfle]

I cannot reproduce this issue.

I created a file index.js with the following:

const typeorm = require('typeorm');
console.log(typeof typeorm);

Then I made sure to run yarn (or npm install) to get the dependencies.

Then I ran ncc build index.js --external typeorm.

The output is only 4 KB du -sh dist.

[unix]

@styfle thank you for reply.

I created an example project: https://github.com/WittBulter/ncc-test , and run different scripts yields the following results:

ncc build app.ts: 5839kB dist/index.js
ncc build app.ts -e typeorm: 2182kB dist/index.js (exclude typeorm)

There will also be some warnings:

ncc: Using [email protected] (local user-provided)
ncc: Module directory "..routing-controllers/driver/koa" attempted to require "koa-multer" but could not be resolved, assuming external.
...
...
ncc: Module directory "../node_modules/typeorm/platform" attempted to require "ioredis" but could not be resolved, assuming external.
ncc: Module directory ".../node_modules/typeorm/platform" attempted to require "redis" but could not be resolved, assuming external.

In this sample project, i only use a very small amount of code, but the size of the package is amazing (in another project I work on, the size of the package has exceeded 10M.), can you try this test project?

[guybedford]

By building with --source-maps and running this through source-map-analyzer, it is possible to see where the footprint of the build comes from. See the image below:

The reason bundles can get so large is because ncc has to include every dependency file that _might_ be loaded, regardless of whether it actually is. So everytime you install a large dependency, if that dependency has a conditional require like if (largeCustomFeature) require('large-custom-feature') then ncc still needs to bundle that large custom feature on the off-chance that it might be used, because it can't know otherwise unless you explicitly mark externals as you have done.

As another test I just tried running the following:

const m = require('module');
const fs = require('fs');
let totalSize = 0;
const resolveFilename = m._resolveFilename;
const seen = new Set();
m._resolveFilename = function (name, parent) {
  const resolved = resolveFilename(name, parent);
  if (resolved[0] === '/' && seen.has(resolved) === false) {
    seen.add(resolved);
    totalSize += fs.statSync(resolved).size;
    console.log('Total size loaded: ' + totalSize);
  }
  return resolved;
}

require('reflect-metadata');
require('typeorm');
require('koa');
require('typedi');
require('class-validator');
require('routing-controllers');
require('koa-bodyparser');

The above will log to the console the total size of all the JS loaded by the application.

In this case running node app.js it gives me an output of 4,4MB. That is, the ncc output size is only twice what is already being loaded, owing to having to include all possibly lazy-loaded code.

So when you run node app.js with your app, you really are executing 5MB of JS :)

[guybedford]

I just updated the numbers above to reflect already-resolved files. Effectively ncc bundles about double what is loaded upfront when you execute natively, due to possible lazy loading. But that you have an app that is loading 5MB of JS upfront, is a pretty big warning sign for such a stack.

[unix]

A brilliant answer! Thank you very much. (this is the analytical work that I should do)
closed.