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

简介: 【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?

引言

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

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

基础请求文件

我们创建一个最基础的vue项目,不引入路由vuex及其他任何第三方JS。运行项目,我们可以发现vue产生了两个请求文件:
GIF 2023-2-27 10-52-18.gif

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中添加大量文字,重新运行项目。
image.png
通过上图,我们可以发现,app.js的大小发生了改变,但chunk-vendors.js的大小并没有发生改变。
:::info
可见:打包后,app.js就是我们的业务层代码,如main.js里面的内容、各个vue组件里面的内容。
:::

chunk-vendors.js

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

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

重新运行项目:
image.png
通过上图,我们可以发现chunk-vendors.js的尺寸几乎翻倍,但app.js的大小几乎没变。
:::info
可见:打包后,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文件
GIF 2023-2-27 17-40-55.gif

注:链接中的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
image.png
实际上,因为我们没有访问对应路由链接。
输入包含新路由的链接http://localhost:8080/demo/data-analysis,就可以看到新路由文件的请求。
image.png
这里的1.js就是dataAnalysis组件内容。

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

请求文件验证

实际上,我们可以借助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: "总部展示大屏"
    }
  }

image.png

相关文章
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
742 1
|
27天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
46 4
|
29天前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
2月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
|
1月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
34 0
|
2月前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
32 1
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
183 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
下一篇
DataWorks