Need to pack everything in one file

Help Requests
1

Hi, guys.

I need to consolidate an app to deploy it in only one js file.

The app has the following configuration:

language: typescript
bundler: webpack
package manager: npm
au-cli version: v1.2.3

I am using aurelia-api, aurelia-dialog, aurelia-i18n and aurelia-validation.

I’ve been trying to tweak settings on webpack.config.js in the output and optimization keys, but without luck.
image

I still got all those bundle files. Want to be able to produce a single bundle.js.

If some more info is needed, please let me know.

Best regards.

1 Like
2

If I am not mistaken, then you need disable the chunking. The relevant options are available under optimization.splitChunks.cacheGroup. If that does not work, maybe post your configuration.

On a related note, it is always a good idea to measure the difference in build time (especially if you are using the dev-server and watching for change), and the loading time in browser, before and after the said change.

1 Like
3

Hi, Sayan.

I tried some variants with the splitChunks key without luck.
My current attempt goes like this:

output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].bundle.js' : '[name].bundle.js',
    sourceMapFilename: production ? '[name].bundle.map' : '[name].bundle.map'
  },
  optimization: {
    namedModules: true,
    runtimeChunk: false,
    moduleIds: false,
    splitChunks: false
}
1 Like
4 
output: {
    path: outDir,
    publicPath: baseUrl,
    filename: '[name].bundle.js', 
    sourceMapFilename: '[name].bundle.map' 
},
optimization: {
    splitChunks: {
        chunks: "all"
    }
}

for me this configuration produces two files: app.bundle.js and vendors~app.bundle.js

1 Like
5

That would be ok for me, but it produces 9 files. I cannot make vendors packages fit on the same bundle.

1 Like
6

Have you resolved this?

7

Hi! I was able to reduce the files to an acceptable two bundles(app and vendors) with this configuration:
splitChunks: {
hidePathInfo: true, // prevents the path from being used in the filename when using maxSize
chunks: “all”,
// sizes are compared against source before minification
maxSize: 20000000, // splits chunks if bigger than 200k, adjust as required (maxSize added in webpack v4.15)
cacheGroups: {
default: false, // Disable the built-in groups default & vendors (vendors is redefined below)
// This is the HTTP/1.1 optimised cacheGroup configuration
vendors: { // picks up everything from node_modules as long as the sum of node modules is larger than minSize
test: /[\/]node_modules[\/]/,
name: ‘vendors’,
priority: 19,
enforce: true, // causes maxInitialRequests to be ignored, minSize still respected if specified in cacheGroup
minSize: 30000 // use the default minSize
},
vendorsAsync: { // vendors async chunk, remaining asynchronously used node modules as single chunk file
test: /[\/]node_modules[\/]/,
name: ‘vendors.async’,
chunks: ‘async’,
priority: 9,
reuseExistingChunk: true,
minSize: 10000 // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
},
commonsAsync: { // commons async chunk, remaining asynchronously used modules as single chunk file
name: ‘commons.async’,
minChunks: 2, // Minimum number of chunks that must share a module before splitting
chunks: ‘async’,
priority: 0,
reuseExistingChunk: true,
minSize: 10000 // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
}
}
}
What I received after bundling is:
image

Which is good enough for me.

Thanks!

2 Likes
8

Maybe if you increase max size more, it will all be merged into 1?

9

Completly removing optimization section from webpack config results in the single file output.

1 Like