Webpack: how to move Aurelia code to vendor bundle from app bundle

Help Requests
1

I’ve cloned the skeleton-navigation repo, and tried building both esnext- and typescript-webpack apps.
In both cases the app.js is much bigger than vendor.js (around 3 Mb of app.js comparing to 1.5 of vendor.js) and it seems it contains all the aurelia-framework code.
I guess this is due to ‘aurelia-bootstrapper’ being an entry point of app bundle?
How do I move the framework to vendor bundle, so that the app bundle contains my actual (tiny) application code ?

2

Hi,

by default if you create a new project by using aurelia-cli, that will contains 2 bundles:

  • vendor-bundle.js: will contains all external libraries used by the application
  • app-bundle.js: will contains all your application, framework included.

Said so, you can split your app bundle making a new bundle with ONLY your module or your application. To make this, go in aurelia_project/aurelia.json under the build section you will see something like this:

"bundles": [{
   "name": "app-bundle.js",
   "source": [
       "[**/*.js]",
       "**/*.{css,html}"
   ]
},{ ...

you need to exclude the path of your application (or module) and create another bundle:

"bundles": [{
   "name": "app-bundle.js",
   "source": [
       "[**/*.js]",
       "**/*.{css,html}"
   ],
   "exclude":[
       "**/your-app/*"
   ]
},{
   "name": "your_app-bundle.js",
   "source": [
       "[**/your-app/*.js]",
       "**/your-app/*.{css,html}"
   ]
},{ ...
4

For when your app bundles starts getting too big, you can also incorporate Webpack’s Code Splitting feature. This allows you to split out your route views (and their dependencies) into separate bundle files that will be loaded on demand.

https://ilikekillnerds.com/2017/03/code-splitting-aurelia-webpack-applications/