vite+vue3.0分割打包

最新推荐文章于 2024-04-07 19:12:09 发布
最新推荐文章于 2024-04-07 19:12:09 发布
阅读量7.7k 收藏 4
点赞数 2
文章标签： vue node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45969830/article/details/117999383
版权

@井底的蜗牛
https://blog.csdn.net/weixin_41277748/article/details/116431789#comments_16705971
在这里插入图片描述
![打印形参id](https://img-blog.csdnimg.cn/2021061718272993.png
打印参数id查看有哪些依赖
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

//使用vue3+vite2创建项目时,刚创建的时会看到让你选择一些依赖，这些依赖是vue自己加入，如果你选择了，创建好后进行下载依赖包然后进行打包(vue3内部使用的是rollup进行打包)，会发现打包的信息中就会有你刚刚选择的依赖js文件，这是vue3内部根据你选择的依赖包自行给你分割了，当你开发是你想要引入element-ui，axios,vuex等等，这些vue它不知道你会不会引入，于是他就把不是vue自己添加的依赖统一打包成 vendor.js的依赖文件，你引入的不多那还行，不会很大，要是引入一大堆依赖，把所有依赖都放在一个文件中就会变得很大，所以想要把这个文件变小，我们就把这些依赖根据你引入的依赖名字进行分割，把一个文件分成多个所以就变小了

楼外君
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue多页面开发和打包正确处理方法
08-27
主要介绍了vue多页面开发和打包的正确处理方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
Vite 打包优化
sinat_35607202的博客
01-11 1596
vite打包优化
vite项目打包资源分配目录
最新发布
wuyixiangt的博客
04-07 499
vite项目打包后所有资源都放在了assets文件夹中，像传统工程一样分为不同的文件夹，js放js文件夹，css放css文件夹，图片放img文件夹。Rollup会深度影响打包结果，如何在vite里面配置Rollup，Rollup相关配置。vite无论是当做是脚手架还是构建工具，内部实现原理就是Rollup和esbuild。vite项目打包资源分配目录。
你把 vite打包 玩明白
热门推荐
技术前端，忠于热爱 @0.活在风浪里
08-02 1万+
webpack 打包看这里（移动端打包）一步一步,一步 从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包成app一步一步,一步 从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目)手写一个服务器代码将 《vue电商后台管理系统》部署上去 上线、打包_0.活在风浪里的博客-CSDN博客亲测可用，一定会收获颇多，1.上线vue电商后台管理项目2.手写搭建服务器并挂载 （node）3.打包优化 完成上线。.............
Vite打包拆分
Flipped的博客
12-14 1709
Vite拆分
vue3不同环境的打包区分
小菜鸟的博客
11-01 834
vue3不同环境的打包区分 首先在vue.config.js中写入 const path = require('path') //导入路径插件 let isProduction = process.env.NODE_ENV == 'production', //判断当前的环境“pro”生产环境 dev开发环境 url; //定义url if (isProduction) { // 生产环境 url = 'http://10.0.0.222:8003/bizv5a5wdsu/'
vue3中多环境配置打包
猫老板的豆
08-26 1834
vue多环境配置及打包 env.development（开发环境） .env.production（生产环境） .env.test（测试环境）
vue 分模块打包 脚手架_vue大型项目之分模块运行/打包的实现
weixin_29699727的博客
12-23 1131
本文以vue-cli3+为例，实现多系统集成下的分模块打包。分模块打包方式多种多样，下文可适用于多系统之间互不干扰，主系统可集成各子系统，各子系统又可单独运行的业务场景。一、目标我们要实现什么？所谓分模块打包，那么各个模块内就必须得有自己独立的入口文件，路由文件。按照这种构想，我在一个新的脚手架src目录下新建了一个projects目录：如上图，可以看到Aproject、B、C、D四个项目。我在A...
vue-cli3多环境多入口，分别打包
weixin_43554698的博客
04-17 8774
最近公司需求，参考了很多资料，自己搭了一个小demo。 一、安装 1.Vue CLI 3需要 nodeJs ≥ 8.9 ，查看node版本升级，升级一下 2.查看版本vue -V，安装vue-cli3，npm install -g @vue/cli 二、使用 1.vue create projectname 搭建新项目：vue create vue-cli3 选择默认default(基本的 Ba...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vite-vue3-admin：基于vite2.0 + vue3.0 + ant-design-vue2.0 +打字稿挂钩
03-03
vue3-antd基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0的后台管理系统模板账号：admin，密码：123456系统模块数据是从先前获取来的真实数据，路由也是从内部动态获取的，而只是通过内网穿透提供访问的，难免发生...
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
使用了Vue3.0全家桶、ant-design-vue2.0和typescript4.0，实践vue3.0的新特性
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
实践vue3.0的新特性以及vite打包工具，采用的是vue3.0的组成API，体验vue3和typescript以及打包工具vite等页面功能列表页列表页增删改改查采用vue3 composition api typescript在项目中运用，提供类型检查 模拟数据...
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
vue3 - 16.suspense/代码分包/性能优化
qq_34111842的博客
10-22 264
当我们在页面中声明异步组件，我们就不能像传统的那样直接import组件了，这个时候我们需要用defineAsyncComponent方法，他是一个回调函数，里面直接import方法。这个时候，当我们npm run build之后，查看dist包，就会帮我们把异步组件拆分出去，从而减少vendor.js的体积。项目npm打包：npm run build，打包成功之后会生成一个dist文件夹。
关于对vue分页面打包方式
超超的博客
12-31 3444
最近了解了一些关于vue分页面打包的方式，因为接触的可能不是很深入，所以就简单记录一下 首先第一步，修改vue目录结构，修改为下图的方式 大致分为： 1、在src下创建一个存储所有页面的文件夹， 2、创建每个独立页面的文件夹，用来存储src下所有的文件（例如：main.js，App.vue、store，router）等等这些文件，放到这个你创建好的文件夹中（相当于小型的vue项目） ...
vue+vite+ts项目按需要引入vant或elementPlus等ui插件时,抽离成单独的 js 文件
qq_21115567的博客
04-15 814
感觉本人写代码有强迫症,每当看到一个文件乱糟糟的就不舒服,为了文件代码美观所以将main.ts中有关引入vant的代码分离出来: main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import vant from './vant' export const app = createApp(App) app.use(router) app.use(vant) a
vite 打包 及其如何拆分打包文件
m0_60830599的博客
09-08 1557
/不打入这俩个文件相关的东西。需要安装 vite-plugin-compression。// 消除打包大小超过500kb警告。// 静态资源分类打包。// 按照自己的实际需求打包。
vue3项目打包附带混淆js
954L
02-15 2088
使用打包插件：terser-webpack-plugin 安装 npm install terser-webpack-plugin --save-dev vue.config.js配置 const TerserPlugin = require('terser-webpack-plugin') configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.plugins.push(new
怎么创建vite+vue3.0项目
05-20
创建 Vite + Vue3.0 项目可以按照以下步骤进行： 1. 首先确保你已经安装了 Node.js 和 npm 的最新版本，可以在命令行中运行以下命令检查版本： ``` node -v npm -v ``` 2. 然后全局安装 Vite，可以运行以下命令： ``` npm install -g vite ``` 3. 创建一个新的 Vue 项目，进入命令行，运行以下命令： ``` mkdir my-vue-project cd my-vue-project npm init -y ``` 4. 安装 Vue3.0 和相关依赖，可以运行以下命令： ``` npm install vue@next @vue/compiler-sfc --save-dev ``` 5. 初始化 Vite，可以运行以下命令： ``` vite init ``` 然后根据提示选择 Vue 3.0 作为模板。 6. 启动开发服务器，可以运行以下命令： ``` npm run dev ``` 然后在浏览器中打开 http://localhost:3000 就可以看到项目的主页了。 以上就是创建 Vite + Vue3.0 项目的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值