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

相关文章
|
5天前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
9天前
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
21 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
|
5天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
9天前
|
JSON JavaScript 前端开发
js请求后端9
js请求后端9
26 2
|
21天前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
61 6
|
21天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
36 3
|
22天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
2月前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
45 0
|
2月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
37 0
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
77 2
下一篇
无影云桌面