How to produce only 1 JS and CSS asset

Ember CLI
1

Hi,

I am using EmberJS to create a PWA application and it requires that only 1 app.js and 1 app.css files are generated. I have tried twiking Ember Auto Import and Webpack but it seems that there is a built-in functionality to produce chunk.app..js and chunk.test..js files.

I have ended up using this ember-cli-build.s setting:

     plugins: [
					new webpack.optimize.LimitChunkCountPlugin({
						maxChunks: 1
					})
				]

that forces Webpack to produce only 1 chunk file. I also added an NPM script that manually appends the chunk.app.*.js file to vendor.js. It seems too hacky though.

I would like to ask if there is a way to “force” Webpack or Ember to just produce one JS file, even though it may not the best optimized way.

PS. I have also tried this Ember Auto Import’s feature but it doesn’t seem to work properly on dev builds.

<!-- in index.html -->
 <body>
   {{content-for "body"}}
   <script src="{{rootURL}}assets/vendor.js"></script>
+   <auto-import-script entrypoint="app"></auto-import-script>
   <script src="{{rootURL}}assets/your-app.js"></script>
   {{content-for "body-footer"}}
 </body>

Thanks.

2

Why do you need only one JS and one CSS file? I’m very familiar with PWAs and I’ve never had a restriction on how many files can be referenced in the index.html :thinking:

Is it some tool you’re using?

3

The thing you’re doing is safe and stable. Concatenating the scripts in order is equivalent to running them separately.

It’s how ember-auto-import used to work. But it adds a lot of complexity to the build, and gives people worse caching.

4

Hi! Did you find an elegant way to pack all js files on build in one file?