Vue.js build and deploy to single file

Question

I have a Vue.js application which I created from webpack and when I build (npm run build), it creates a 'dist' folder with static/css and static/js folders respectively. I get

app.12345.js*
app.12345.map
manifest.556.js*
manifest.556.js.map
vendor.991.js*
vendor.991.js.map

In the index.html it produces, it only seems to be using the files marked with an asterisk (*). My question is, is there a way to condense these 3 into one file so I only need to reference one file in my index page? Like ~/myApp.js? I've read about chunking but I can't seem to get less than the 3 files listed.

Put your webpack config file. It seems your file is not right. — F.bernal
– F.bernal, Commented Sep 20, 2018 at 14:07
You can see a detailed answer over here: stackoverflow.com/questions/54508375 — RaelB
– RaelB, Commented Feb 4, 2019 at 15:20

atazmin · Accepted Answer · 2020-08-27 03:01:22Z

9

module.exports = {
  css: {
    extract: false,
  },
  configureWebpack: {
    optimization: {
      splitChunks: false
    }
  },
}

filename: vue.config.js (root folder)

answered Aug 27, 2020 at 3:01

atazmin

5,8651 gold badge41 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ceejayoz · Accepted Answer · 2018-09-20 15:41:02Z

You can, but you shouldn't.

The point of this separation is to reduce load times and bandwidth usage when you make updates to the application. Infrequently changing things - Vue, libraries like Bootstrap, etc. - go in the vendor file, whereas frequently changing items go in the main JS file. That way, making a minor tweak in your app only requires the user to re-download the app's files (which are usually quite small, filesize-wise) and not all the big libraries it uses.

This is likely managed by the CommonsChunkPlugin in your Webpack config.

Jerry · Accepted Answer · 2018-09-20 15:32:28Z

-3

The question is : why would you wanna do this ? This is only for less codes, but if the project grows bigger, loading one file takes longer than three separated files.

answered Sep 20, 2018 at 15:32

Jerry

1689 bronze badges

3 Comments

Adrian Over a year ago

So when I build without the chunking I get a single 411KB JS File (and a css file). If I leave the webpack as is, then I get the several files . The Vendor.xx.js is 390KB; app.xx.js 22KB and manifest.xxx.js 1KB. So technically when I build, the app file at 22KB should be the only one changing based on the suggestion that its quicker to load. But with the webpack, each build generates a unique chunk id and is replaced in that XXX portion of the file name. So if I add a new field to the app.js, all 3 files change. All 3 files need to be redownloaded by the browser?

Jerry Over a year ago

If the chunk hash is not matching , it will reload, and the same with one file situation, and what's the connection between your question and this case? If there's changing in the origin code, the browser has to redownload some files, that's why we need to make js file more separated so that webpack can track the changes more specific , instead of using one file.

RaelB Over a year ago

I think it is a valid question. vue init webpack-simple merges all output into a single file. It easier to integrate into other systems if there is only 1 output file.

Collectives™ on Stack Overflow

Vue.js build and deploy to single file

3 Answers 3

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Linked

Related