Vite基础配置之 - 分包

news2025/1/28 1:07:12

Vite基础配置之 - 分包

什么是分包呢?它有什么好处呢?

还是举个例子,来回忆一下吧,什么呢?
比如说,我使用了 loadsh.js 的东西,那么我们在打包的时候,就会把 loadsh 相关资源也会打包进来,这个是没有问题的,此时是将 loadsh 的东西 与 我们自己写的相关代码合成一个文件,记住是一个文件。
浏览器是有缓存机制的,当每一次去请求的文件资源时 ( 文件名是没有发生改变的时候,就会读取内存中的数据,而不会重新去服务器获取 )。
分包,我的理解,就是将第三方资源文件单独打成一个文件,自己写的代码打成另一个文件

如果我们不进行分包
我们每一次修改代码之后,进行打包,结果这个文件的内容有 :第三方资源包代码 + 我们自己写的业务代码。
而且,这个文件的名字,每一次都会发生变化的(源代码发生变化),所以当用户去访问我们的页面时,请求的资源文件内容有 : 第三方资源包代码 + 自己的业务代码,而真正需要跟新的只有 自己的业务代码,导致每一次,请求的js文件体积都很大,所以响应时间会长一些

所以我们进行分包,在vite.config.js中的

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: (filePath) => {
          if (filePath.includes('node_modules')) {
            // 如果这个文件路径,是来自 node_modules的,那么我们就进行发包
            return 'vendor';
          }
        }
      }
    }
  }
});

在这里插入图片描述
结果就像这样,会有两个js文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407722.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AJAX跨域问题及解决方案

文章目录跨域哪些方式可以进行跨域部署服务器部署模块ajax1ajax2测试跨域解决方案方案1:设置响应头方案2:jsonp深入一下jsonp方案3:代理机制(httpclient)第一种方案:使用JDK内置的API第二种方案&#xff1a…

Vite 打包性能优化

Vite 打包性能优化开始一个 Vite ts 项目分包策略gzip 压缩cdn 加速开始一个 Vite ts 项目 这里我们开始了一个 Vite ts 的项目&#xff0c;其中关于 ts 的配置直接看内容注释即可 npm init -y npm i vite -D npm vite-plugin-checker -D #用来强制提示ts报错<!-- inde…

反射时竟然NoSuchMethodException了!看这篇超详细的解决方案吧

前几天九哥在讲Servlet时&#xff0c;为了灵活地使用同一个Servlet来处理对同一张表的业务操作请求&#xff0c;我给学生讲解了BaseServlet工具类的封装&#xff0c;基本实现思路有如下几个步骤。 一. 反射封装BaseServlet工具类 使用反射封装BaseServlet工具类&#xff0c;无…

uview常用组件案例操作及详解(一) 选择器 picker

uview常用组件案例操作及详解&#xff08;一&#xff09; 选择器 picker 1.图片示例 2.使用方法 *为简便代码不提供样式 <view><view><text>行业性质</text><text>*</text></view><view><text v-if"!text.industry…

echarts中的legend属性

legend: {orient: "vertical",right: "0%",top: "15%",icon: "circle", //小圆点itemWidth: 8,itemHeight: 8,itemGap: 15, //间隔formatter: function (params) {let tip1 "";let tip "";let le params.leng…

【uni-app】swiper的使用

最近在学习小程序的开发&#xff0c;其中有用到swiper&#xff0c;在这里记录一下我的学习历程 有一些人&#xff0c;他刚开始并不会开发小程序&#xff0c;但是在任务面前&#xff0c;没有什么是不可以学的… 刚开始接触到swiper的时候&#xff0c;是在uni-app的官方文档里&am…

Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节

文章目录Pinia状态管理Pinia和Vuex的对比Pinia基本使用&#x1f364;创建Pinia&#x1f364;创建StorePinia核心概念State&#x1f35f;state基本使用&#x1f35f;state其他操作Pinia核心Getters&#x1f355;getters基本使用&#x1f355;getters其他操作Pinia核心Actions&am…

React -- useState 的使用及注意事项

一、基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数&#xff0c;基本语法如下&#xff1a; const [count, setCount] useState(initialCount)它返回一个状态和一个修改状态的方法&#xff0c;状态需要通过这个方法来进行修改&#xff1b;initialCount 是我…

Vue3+Vite实现动态路由

项目基本目录 1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载 import {createRouter,createWebHashHistory } from "vue-router";import store from ../store/index.jsconst routes [{path: "/login",component: () …

jsjiami.com V6版本,js解密的方法。

我们在爬内容&#xff0c;抓取页面的时候&#xff0c;总会遇到sojson v5&#xff0c;jsjiami.com的v6加密。 jsjiami v6 &#xff1a; JS加密,JS不可逆加密,JS混淆,JS混淆加密,JS压缩加密 - [JavaScript加密] 我看了下这个js完全有效。废话不多说。直接上代码。 (function (…

vue中深度选择器

scoped的作用 scoped 可以使当前的样式只在自己当前的组件内起作用。为了防止在一个组件内引入了子组件&#xff0c;而子组件没有加scoped。这个时候如果父子组件有相同的类名&#xff0c;就会产生样式的影响。 原理: 加了scoped就相当于给当前组件所有的标签添加一个【data-v-…

微信小程序实现轮播图

实现轮播图之前必须知道以下三点&#xff1a; 一、轮播图外层容器swiper 二、每一个轮播项swiper-item 三、swiper标签存在默认样式 1. width 100% 2. height 默认为 150px 3 .swiper高度无法实现由内容撑开 默认的150px高度的轮播图如下图: 原图是长这个样子的&#xf…

bootstrap-fileinput(二:编辑(修改)界面文件的上传,回显,删除(数据库同时删除)的操作 )

文章目录bootstrap-fileinput(二&#xff1a;编辑(修改)界面文件的上传&#xff0c;回显&#xff0c;删除(数据库同时删除)的操作 )一、编辑界面文件的上传二、编辑界面文件的回显1.文件的实体类&#xff1a;2.想要回显文件&#xff0c;首先要在工程类(你的编辑界面的主类)里面…

ES6面试问题汇总

面试官通过总问题&#xff0c;ES6方法开始提问 1.ES6有哪些新增方法&#xff1f;/你了解哪些ES6方法&#xff1f;&#xff08;总问题&#xff09; 块级作用域、 模板字符串、 解构赋值、 箭头函数、 函数默认参数、 剩余参数&运算符、 set和map、 import和exprot用…

Vue中实现过渡动画

文章目录Vue的transition动画Transition动画的使用Transition组件的原理Transition动画的classVue的animation动画Animation动画的使用同时设置两种动画(了解)过渡的模式mode列表过渡列表过渡的介绍列表过渡的使用Vue的transition动画 Transition动画的使用 在开发中&#xf…

vite配置cdn优化打包体积

文章目录前言一、版本确认二、使用步骤1.rollup-plugin-visualizer打包体积可视化面板2.配置cdn方法第一种方法&#xff1a; vite-plugin-cdn-import第二种方法&#xff1a; rollup-plugin-external-globals总结前言 大家都知道前端性能优化的方法&#xff0c;cdn外部引入的方…

【微信小程序】小程序知识补充篇

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新了呀。 还有就是中秋节就快来啦&#xff0c;程序员过中秋&#xff0c;当然是要好好放松一下啦&#xff0c;那么中秋前我们就不能偷懒了&#xff0c;赶紧学…

Controller层接收前端传参的几种方法。@RequestParam、@RequestBody、@PathVariable。及参数校验。

一、RequestParam 主要用于将请求参数区域的数据映射到控制层方法的参数上 // http://localhost:8080/wh/user/edit?Id9452659856325148452&name天天向上// RequestParam源码Target({ElementType.PARAMETER}) // 只能作用于参数上 Retention(RetentionPolicy.RUNTIME) D…

vue watch监听数据解决新旧值一样的问题(newValue, oldValue)

watch是监听 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值。 基础用法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge…

异步函数async

什么是同步异步 在最新的ES7&#xff08;ES2017&#xff09;中提出的前端异步特性&#xff1a;async、await。 在了解async和await之前得先明白什么是同步函数&#xff0c;什么是异步函数。 同步函数&#xff1a;当一个函数是同步执行时&#xff0c;那么当该函数被调用时不会…