Minimize the quantity of files processed by Vue

Question

Minimize the quantity of files processed by Vue

Here is the content of my vue.config.js file:

css: {
  extract: false,
},
configureWebpack: {
  devtool: 'source-map',
  optimization: {
    splitChunks: false,
  },
},
productionSourceMap: false,

I'm facing an issue where running npm run build results in multiple JS files being generated, each just a few kilobytes in size. How can I reduce the number of HTTP requests?

Entrypoint size limit exceeded: The combined asset size for the following entrypoint(s) exceeds the recommended limit (244 KiB). This could negatively impact web performance.
Entrypoints:
app (2.2 MiB)
  js/app.e5ac77b2.js
File                                    Size          Gzipped
...
(dist\js\chunk-2d0e523f.2a1a17be.js     0.57 KiB      0.38 KiB)

javascript vue.js webpack

Answer 1

Answer №1

Issue does not lie within your vue.config.js, but rather in your router.js

The problem arises from using async components (

component: () => import('./views/user/SignUp.vue')

) where each import() operation generates a new JS chunk

To optimize Webpack code splitting, you can utilize magic comments. For instance, consolidate all "user" components/routes into a single chunk:

component: () => import(/* webpackChunkName: "user-chunk" */ './views/user/SignUp.vue')

Remember to apply the same comment for all "user" sub-route components

Answer 2

Issue does not lie within your vue.config.js, but rather in your router.js

The problem arises from using async components (

component: () => import('./views/user/SignUp.vue')

) where each import() operation generates a new JS chunk

To optimize Webpack code splitting, you can utilize magic comments. For instance, consolidate all "user" components/routes into a single chunk:

component: () => import(/* webpackChunkName: "user-chunk" */ './views/user/SignUp.vue')

Remember to apply the same comment for all "user" sub-route components

Minimize the quantity of files processed by Vue

Answer №1

Similar questions

In what ways can I apply the outcome of this commitment?

Activate AngularJS autocomplete when populating the input field using JavaScript

Generating separators in every third row using an array of card elements

Issues with the @input listener failing to work on a customized component

Whenever Ionic is paired with LokiJS, it consistently results in the error message: "ionic.bundle.js:26794 TypeError: Cannot read property 'insert' of undefined"

Tips for adding extra spacing between icon and text field using Vuetify

Steps for installing Vue.js version 2

IE8 does not support Jquery ajax() for cross domain requests to remote servers

How to retrieve a single value from a collection document in Meteor

Refresh FullCalendar in Angular 2 and above

Open the link and input the text into the text box?

Execute a Gulp task automatically following the installation of an NPM package, no need for

Issue with Angularjs: NG-repeat and filter not functioning correctly on array

Error in Syntax & Function is Undefined

Can Chrome DevTools be used to manipulate the login process?

Making asynchronous requests using AJAX

DevServer Proxy with Axios Library

"Utilize axios in React to interpret and handle error bodies captured through parsing as a ReadableStream

How to automatically generate a serial number using JavaScript each time a click event occurs

The THREE.WEBGLRenderer does not exist as a constructor in the three.js library