vue3+ts项目打包 性能优化+压缩代码体积

已于 2023-11-02 10:46:55 修改
阅读量576 收藏
点赞数
分类专栏： 小吴的前端分享 文章标签： 前端 开发语言 vue.js javascript
于 2023-11-02 10:45:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42337801/article/details/134176962
版权

参考链接：传送门
暂时先用了两个，后面陆续增加

开启视图工具

安装

npm i rollup-plugin-visualizer -D

使用

import {
    visualizer } from 'rollup-plugin-visualizer'
...
plugins: [
    visualizer({
    open: true }),
]
配置打包文件分类输出
将js，css这些资源目录分别打包到对应的文件夹下
...
build:
最低0.47元/天 解锁文章
uniapp优化之路(一) 如何在 uniapp+vue3+vite 项目中查看打包后的依赖大小
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
05-03 153
在进行 uniapp、Vue3 和 Vite 开发时，随着项目的增大，我们可能会遇到打包后的文件过大或者依赖过重的问题。：通过这个插件，可以生成打包报告，帮助你可视化每个模块的体积和依赖关系，方便我们定位项目中体积较大的依赖。，打包完成后会自动打开浏览器，显示一个依赖可视化的报告，帮助你查看项目中各个模块的大小。插件，用于自动化的 CSS 提取，避免了多余的 CSS 导入。，以便在打包时查看依赖的大小，帮助你做出优化。来可视化打包后的依赖大小，从而找出瓶颈。接下来，我们修改项目中的。，以及其他的依赖包。
vite3+vue3 项目打包优化三 — CDN加速、文件压缩
前端知识分享喵
05-24 2668
内容分发网络（Content Delivery Network，简称 CDN），是构建在数据网络上的一种分布式内容分发网，它可以让用户从最近的服务器请求资源，以提升网络请求的响应速度。：一但依赖网站出现问题，我们的项目也就不行了，建议留下备用方案，以便维护。把打包好的项目放入服务器目录，服务器开启 gzip 服务，这样通过项目地址就可以在浏览器中进行访问了。需要注意的是，浏览器解压也是需要时间的，如果项目体积不是很大的话，不建议采用 gzip 进行压缩
使用webpack打包编译TypeScript代码
weixin_52139094的博客
06-28 936
TypeScript打包 webpack整合 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包； TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS； 步骤如下： 初始化项目 进入项目根目录，执行命令 npm init -y，创建package.json文件 下载构建工具 命令如下： npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plug
基于Vite构建的Vue3+Ts项目打包优化全过程
weixin_51629637的博客
07-14 5324
vite构建的vue3+ts项目，记录打包优化实践全过程。
Vue 3 打包优化实战指南：从构建到部署的全链路性能提升
最新发布
qq_39842184的博客
03-20 1042
通过以上实战步骤，我们系统性地解决了Vue 3应用的打包体积问题。优化策略需要根据实际项目需求选择，过度优化可能导致开发体验下降。建议建立性能基准，在每次迭代中进行对比验证。
vue-cli3项目打包优化
wanghaifen335496的博客
05-21 1327
看到过一些文章借助对项目中的图片进行有损压缩从而减小项目体积，有兴趣的小伙伴可以尝试下，当然对于项目优化肯定是不会只有这几个方面的，还有更多其它的优化方法各位也可以一起沟通交流。
Vue3项目上线打包优化
kangaroo的博客
10-18 1330
Vue3项目上线打包优化，不定时更新。
vue3+ts打包生产环境，测试环境，开发环境
sdad2154的博客
08-28 646
一、创建配置文件1、与src目录同级创建配置文件|—src— ||—views2、文件配置内容MODE ：用于区分每个环境PROXY_PREFIX ：代理VUE_APP_API_URL ：环境地址③.env.test。
vite3+vue3 项目打包优化
前端知识分享喵
05-16 2678
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。
vue 3.0 + vite项目gzip打包优化
m0_67266585的博客
03-03 1556
最近自己构建了一个 vite 2.0 + vue 3.2.* 的开源项目，记录一下本次项目进行本地代码打包压缩的优化 手摸手开始优化 什么是gzip 为什么要去优化 如何优化 1. 前端代码配置 代码压缩 服务器配置 ``Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. St
Vue3+TS封装axios
qq_55928824的博客
01-04 4521
Vue3+TS封装axios
解决vue cli使用typescript后打包巨慢的问题
10-16
主要介绍了解决vue cli使用typescript后打包巨慢的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用rollup打包vue3+ts+vite组件并发布至npm
温壁
05-22 2855
rollup打包vue3+ts+vite的组件功能案例教程
解决vue3+Ts项目，打包报错问题。
阿琰a_的博客
05-29 2173
可以看到以上报错，很多基本上都是ts的写法问题，有的同事写ts可能不会在意这些问题，例如写了index却没有使用，导入了某个模块却没有使用，再或者定义的变量没有加类型，再打包的时候都会出现问题，那么临时去改肯定来不及，我们可以在package.json中去处理打包命令。可以看到build命令里面有两个命令。vue-tsc和vite build；vue-tsc是TypeScript的编译命令，而vite build是vite的打包编译命令，如何想要打包成功不报错的情况下，需要将vue-tsc命令删掉即可。
vue3+ts项目中router+pinia+scss+unocss+跨域配置
我愿化作繁星
05-27 1285
❗️❗️❗️❗️本文是根据B站作者视频以及稍作整理💖💖作者B站地址💖💖视频教程地址💖💖作者微信：专注前端技术分享,技术讨论加。
vite + vue3项目 对vite.config.ts 配置gzip压缩
Guojun19900715的博客
07-19 1364
vite + vue3创建的项目打包时配置并开启 gzip 压缩
vue3+ts+vite 上线打包流程步骤（亲测有效）
heavenz19的博客
06-26 4913
【代码】vue3+ts+vite 上线打包流程步骤（亲测有效）
前端vue3一键打包发布
weixin_39559449的博客
05-12 5084
一键打包发布可以分为两种，一是本地代码，编译打包后发布至服务器，二是直接在服务器上拉去代码打包发布至指定目录中。两种各有使用场景，第一种是前端开发自己调试发布用的比较多，第二种是测试或者其他人员用的多，前端开发将代码上传至git中，测试人员可以在服务器上拉取指定分支如release_V0.1，然后打包发布用于测试。
vue3 + vite + ts项目
03-20
### 如何设置一个基于 Vue 3、Vite 和 TypeScript 的项目 要创建并配置一个基于 Vue 3、Vite 和 TypeScript 的现代前端开发环境，可以按照以下方法操作： #### 创建项目 通过 `pnpm` 工具来初始化一个新的 Vite 项目。以下是具体命令： ```bash pnpm create vite vue3-element-template --template vue-ts ``` 这条命令会使用官方模板快速搭建一个支持 Vue 3 和 TypeScript 的基础框架[^1]。 #### 安装依赖 进入刚刚创建的项目目录后，运行以下命令安装必要的依赖项： ```bash pnpm install ``` 这一步骤将自动解析并下载所需的库文件以及工具链，包括但不限于 Vue 3 核心包、TypeScript 编译器及相关插件。 #### 启动本地服务器 为了验证项目的正常工作状态，在完成上述步骤之后可以通过下面这个指令启动内置的服务端口用于调试目的： ```bash cd my-vue-app && pnpm run dev ``` 此命令会在默认浏览器窗口打开应用实例以便实时预览效果变化情况。 #### 构建生产版本 当准备部署应用程序到线上环境之前，则需执行构建流程以优化资源加载效率和减少体积大小： ```bash pnpm run build ``` 该过程通常涉及代码压缩、Tree Shaking（移除未使用的模块）、静态资产处理等功能实现最终产物打包输出至指定路径下供后续分发使用。 #### 配置 tsconfig.json 文件 对于任何采用 TypeScript 技术栈的新工程而言，合理调整其编译选项至关重要。一般情况下，默认生成的基础配置已经能够满足大部分需求；然而如果存在特殊场景或者高级特性启用的需求时，则可能需要手动编辑位于根目录下的 `tsconfig.json` 文件内容如下所示作为参考样本之一: ```json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": ["vite/client", "@types/node"], "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules", "dist"] } ``` 以上片段定义了一些重要的参数比如目标 JavaScript 版本(`esnext`)、模块化方案选择(`esnext`)以及其他增强型功能开关等等。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值