App bundle in Aurelia template is bloated #400

New Issue

fergalmoran · 2025-08-09T17:16:08Z

fergalmoran commented

2025-08-09 17:16:08 +00:00

Originally created by @MaximBalaganskiy on 9/27/2017

By default, webpack bundles aurelia modules from commonjs distribution folder.
At the same time, in webpack.config.js AureliaPlugin is configured by default to convert requests from dist/commonjs to dist/native-modules. This results in bloated app.js bundle which has all the required aurelia modules in native format because it cannot find those in vendor.js.

Also, it's not only bloating. Some Aurelia plugins with submodules fail to correctly import them because they end up separated in different bundles.

The way to fix this is to add the plugin to the webpack.config.vendor.js

new AureliaPlugin({ aureliaApp: undefined, dist: "native-modules" })

which will instruct webpack on the right distribution folder

As a second option, I tried adding dist option to the plugin configuration in the webpack.config.js like this new AureliaPlugin({ aureliaApp: "configure", dist: "commonjs" }), but this didn't work - the app couldn't find aurelia-pal-browser module. AureliaPlugin in the vendor bundle also does a very important thing - saves original module id, e.g. aurelia-pal-browser, into manifest's meta field. This helps the loader with dynamic imports.

PS:
As for the rest of the PR, it's not really that important and can be ignored.

*Originally created by @MaximBalaganskiy on 9/27/2017* By default, webpack bundles aurelia modules from `commonjs` distribution folder. At the same time, in `webpack.config.js` `AureliaPlugin` is configured by default to convert requests from `dist/commonjs` to `dist/native-modules`. This results in bloated `app.js` bundle which has all the required aurelia modules in native format because it cannot find those in `vendor.js`. Also, it's not only bloating. Some Aurelia plugins with submodules fail to correctly import them because they end up separated in different bundles. The way to fix this is to add the plugin to the `webpack.config.vendor.js` new AureliaPlugin({ aureliaApp: undefined, dist: "native-modules" }) which will instruct webpack on the right distribution folder As a second option, I tried adding `dist` option to the plugin configuration in the `webpack.config.js` like this `new AureliaPlugin({ aureliaApp: "configure", dist: "commonjs" })`, but this didn't work - the app couldn't find `aurelia-pal-browser` module. `AureliaPlugin` in the vendor bundle also does a very important thing - saves original module id, e.g. `aurelia-pal-browser`, into manifest's `meta` field. This helps the loader with dynamic imports. PS: As for the rest of the [PR](https://github.com/aspnet/templating/pull/16), it's not really that important and can be ignored.

fergalmoran closed this issue

2025-08-09 17:16:08 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#400