What JS requests are generated after the Vue project is packaged

---

highlight: a11y-light
theme: smartblue

introduction

If we pay attention to performance optimization, we will notice that after the vue project is packaged, several js request files will be generated, such as app.js or chunk-vendors.js. This article will delve into what are the files generated after the Vue project is packaged.

Note: After vue is packaged, it is consistent with the js request file generated after the vue project is run directly locally. For the convenience of display, this article uses the file generated after the project is started locally for discussion.

base request file

We create a basic vue project without introducing routing , vuex and any other third-party JS . Running the project, we can find that vue has generated two request files:

name	status	type	size	time
chunk-vendors.js	200	script	392 kB	67 ms
app.js	200	script	15.5 kB	70 ms

Let's go through them one by one.

app.js

We add a lot of text in app.vue and re-run the project.

From the above figure, we can find that the size of app.js has changed, but the size of chunk-vendors.js has not changed.

It can be seen that after packaging, app.js is our business layer code, such as the content in main.js and the content in each vue component.

chunk-vendors.js

Install and introduce moment.js in our app.vue

<script>
import moment from "moment"
moment()
export default {
  name: "App",
};
</script>

Rerun the project:

From the picture above, we can see that the size of chunk-vendors.js has almost doubled, but the size of app.js has hardly changed.

It can be seen that after packaging, chunk-vendors.js integrates the js content used in node_modules.

routing request file

Taking an enterprise-level project as an example, we define a routing page in the project.

const headquarters = () => import("@/views/headquarters/index.vue");
export default [
  {
    path: "/",
    name: "headquarters",
    component: headquarters,
    meta: {
      keepAlive: false,
      title: "总部展示大屏",
      name: "总部展示大屏",
    },
  },
];

Start the project http://localhost:8080/demo/ , we can see that the page requests 3 JS files

Note: The demo in the link is the baseUrl of the project

They work as follows:

request file	effect	resource size	request time
0.js	headquarters routing content	(prefetch cache)	60 ms
app.js	Non-routing page content such as main.js	893 kB	12 ms
chunk-vendors.js	node_modules content	37.9 MB	427ms

we are adding a route

  {
    path: "/data-analysis",
    name: "dataAnalysis",
    component: () => import("@/views/data-analysis/index.vue"),
    meta: {
      keepAlive: false,
      title: "数据分析",
      name: "数据分析",
    },
  },

Re-enter the link http://localhost:8080/demo/ , you may wonder why the request file is still 0.js even though the route has been added ?

In fact, because we did not visit the corresponding routing link.

Enter the link http://localhost:8080/demo/data-analysis that contains the new route , and you can see the request for the new route file.

1.js here is the content of the dataAnalysis component.

Also, based on prefetch, we can actually see all routing pages 0.js and 1.js in html

request document verification

In fact, we can change the request file name of the route with the help of webapck magic annotations.

  {
    path: "/",
    name: "headquarters",
    component: () => import(/*webpackChunkName:"headquarters" */ "@/views/headquarters/index.vue"),
    meta: {
      keepAlive: false,
      title: "总部展示大屏",
      name: "总部展示大屏"
    }
  },
  {
    path: "/data-analysis",
    name: "dataAnalysis",
    component: () => import(/*webpackChunkName:"data-analysis" */ "@/views/data-analysis/index.vue"),
    meta: {
      keepAlive: false,
      title: "总部展示大屏",
      name: "总部展示大屏"
    }
  }