[Feature request] ncc builder (for node apps)

[tmtron]

Description

It would be great to have a builder that can use the ncc compiler.
It can create a single javascript file from our typescript application that only contains all required javascript code for the application.

This can greatly reduce the size of the deployment artefacts (i.e. docker containers)

Motivation

The ncc compiler will build a single java-script file that only contains the code that is really needed and thus the file-size of the deployment can be significantly smaller.

i.e. when we use the default nx way, all dependencies that are mentioned in package.json will be installed (in node_modules).
Now we must deploy the whole node_modules and the build-output (our javascript code + assets)

As mentioned here: the generatepackagejson option can definitely help, but ncc can decrease the deployment size much more than this feature, because it can apply tree shaking to the required code in the node-modules.

When all code is in a single file, this could also improve performance (i.e. important for Microservices)

see also discussions in #1777, #3929

Example for one of our nx mono-repos (ng app, node server and some libs):

• default size: node_modules: ~ 1GB, main.js: ~3MB
• ncc size: main.js ~21MB

Suggested Implementation

Maybe you could build a dedicated nx-ncc-builder - or add an ncc option to the current node-builder..
AFAIK ncc also uses webpack under the hood , so maybe this is simple to add?

Alternate Implementations

What we currently do is to execute the nx-build and then use the ncc compiler on the build-results.
This works (with some tweaks and workarounds), but I am sure, that a dedicated nx-ncc-builder could be much better (performance and disk-size wise)

[tmtron]

@vsavkin I think the scope should be node - not nextjs.
ncc is a standalone project, not tied to nextjs

[patdx]

@tmtron I was thinking about doing something like this, until I figured out I could set “externalDependencies” for the Node builder to “none” inside the workspace.json/angular.json file. Not sure if that helps.

[theoludwig]

I think this feature would be awesome to develop microservices and api applications inside a @nrwl/nx monorepo!
I read all the thread in #1777 and it seems like there is no clear answer to how to develop microservices with small build or only the needed dependencies to install inside a Docker container.

It seems like @nrwl/nx is more focused on frontend development than backend badly, but both should be considered when building large scale applications.

[ronnetzer]

Hi guys,
I've released an initial version of an ncc nx plugin (npm i -D @e-square/nx-ncc).

Currently, I have one major issue that ncc cant resolve libs that are defined with tsconfig paths. The build will succeed but a runtime error will be thrown that the module could not be found.

Another limitation (which comes from ncc) is that you cant specify a path to a tsconfig file (vercel/ncc#457). I was able to overcome this issue by temporary overwriting the tsconfig.json with the one specified in the target's configuration (there's a tsConfig option that can be passed to the plugin)

Also, usage example can be found here (which uses this plugin to build a github action)

I would appreciate any help to make this plugin work correctly.

[knitkode]

Hi @ronnetzer thanks for sharing your experiment with ncc and nx, I tried your plugin but I have an issue, my setup is an nx monorepo with some libs, one of these libs is a github action which includes a couple of the other packages within the monorepo. When bundling the github action package they do not get bundled in the index.js produced by ncc, they remain as such:

[...]

/***/ }),

/***/ 638:
/***/ ((module) => {

module.exports = eval("require")("@my/lib-main");


/***/ }),

/***/ 311:
/***/ ((module) => {

module.exports = eval("require")("@my/other-lib");


/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
[...]

have you also experienced this? is your plugin supposed to handle this scenario?
many thanks in advance

[ronnetzer]

Hi @knitkode,
Thank you for trying our plugin.

As I've written above,

Currently, I have one major issue that ncc cant resolve libs that are defined with tsconfig paths. The build will succeed but a runtime error will be thrown that the module could not be found.

So currently, it's not supported but in the meanwhile you can fix it by changing your imports to the library from @scope/my-lib to relative imports.

Would you mind open an issue in our repo?

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[tobysmith568]

@tmtron is right, the label shouldn't be next.js. And this would be a great builder!

[AgentEnder]

I'm going to go ahead and close this out - there is an existing community plugin for NCC, and since we don't use it internally we cannot dogfood the API to ensure it is well maintained (while this is not a hard requirement for a first party executor, its definitely something we consider).

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.