Vue项目打包后都产生了哪些JS请求

---

highlight: a11y-light
theme: smartblue

引言

如果我们关注性能优化，会注意到vue项目在打包后，会产生若干js请求文件，如app.js或chunk-vendors.js。 本文将深入探讨Vue项目打包后产生的文件都是什么。

注：vue打包后和vue项目直接本地运行后产生的js请求文件一致，为了方便展示，本文采用本地启动项目后产生的文件进行探讨。

基础请求文件

我们创建一个最基础的vue项目，不引入路由、vuex及其他任何第三方JS。运行项目，我们可以发现vue产生了两个请求文件：

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

我们逐一探讨。

app.js

我们在app.vue中添加大量文字，重新运行项目。

通过上图，我们可以发现，app.js的大小发生了改变，但chunk-vendors.js的大小并没有发生改变。

可见：打包后，app.js就是我们的业务层代码，如main.js里面的内容、各个vue组件里面的内容。

chunk-vendors.js

我们app.vue中安装并引入moment.js

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

重新运行项目：

通过上图，我们可以发现chunk-vendors.js的尺寸几乎翻倍，但app.js的大小几乎没变。

可见：打包后，chunk-vendors.js集成的是node_modules里面用到的js内容。

路由请求文件

以一个企业级项目为例，我们在项目中定义一个路由页面。

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

启动项目http://localhost:8080/demo/，我们可以看到页面请求了3个JS文件

注：链接中的demo是项目的baseUrl

它们的作用如下：

请求文件	作用	资源尺寸	请求时间
0.js	headquarters路由内容	(prefetch cache)	60 ms
app.js	main.js等非路由页面内容	893 kB	12 ms
chunk-vendors.js	node_modules内容	37.9 MB	427ms

我们在增加一个路由

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

重新输入链接http://localhost:8080/demo/，你可能会疑惑，明明添加了路由，但是为什么请求文件还是0.js？

实际上，因为我们没有访问对应路由链接。

输入包含新路由的链接http://localhost:8080/demo/data-analysis，就可以看到新路由文件的请求。

这里的1.js就是dataAnalysis组件内容。

此外，基于prefetch，我们实际上能在html中看到所有的路由页面0.js和1.js

请求文件验证

实际上，我们可以借助webapck魔法注释来更改路由的请求文件名。

  {
    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: "总部展示大屏"
    }
  }