当前位置： 首页 > news >正文

【前端项目笔记】10 项目优化上线

news 2025/12/16 21:15:12

项目优化上线

目标：优化Vue项目+部署Vue项目（上线提供使用）

项目优化

项目优化策略：

  1. 生成打包报告：根据生成的报告发现问题并解决
  2. 第三方库启用CDN：提高首屏页面的加载效率
  3. Element-UI组件按需加载
  4. 路由懒加载
  5. 首页内容定制

为项目添加进度条效果

会用到第三方的包nprogress，添加loading效果

  1. 安装：
npm install --save nprogress
  1. 导入nprogress包
  2. 需要配置两个拦截器request（请求拦截器）和response（响应拦截器）
    在请求拦截器request中调用NProgress.start()展示进度条
    在请求拦截器response中调用NProgress.done()隐藏进度条
    在这里插入图片描述
    在这里插入图片描述

build 编译并压缩（用于生产环境）
在build时报错：
在这里插入图片描述

解决方法：解决Error: error:0308010C:digital envelope routines::unsupported的四种解决方案
使用方案4解决报错：
在这里插入图片描述
在这里插入图片描述

解决build警告

使用babel插件在项目build阶段把所有console移除
安装babel-plugin-transform-remove-console：

npm install babel-plugin-transform-remove-console --save-dev

在这里插入图片描述
但由于此插件的配置全局生效，意味着项目开发、测试、发布阶段都会移除console.log，不方便测试。需要将其设置为仅在发布阶段生效：
在这里插入图片描述

生成打包报告

为了直观看到项目中存在的问题
在这里插入图片描述
在这里插入图片描述

看到有哪些文件体积扩大，需要将其优化
如何优化项目的打开速度

通过vue.config.js修改webpack的默认配置

Webpack是一个模块打包工具，它的主要功能是分析项目结构，找到JavaScript模块以及其他浏览器不能直接运行的扩展语言（如SCSS、TypeScript等），并将它们打包为合适的格式以供浏览器使用。Webpack通过依赖关系图来管理非代码资源，如images或web字体等，并会把它们作为依赖提供给应用程序。每个模块都可以明确表述它自身的依赖，在打包时可根据依赖进行打包，避免打包未使用的模块。Webpack的优点包括拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置，扩展性强，插件机制完善，社区庞大，更新速度快，轮子丰富。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

为开发模式与发布模式指定不同的打包入口

在这里插入图片描述

configWebpack和chainWebpack

在这里插入图片描述

通过chainWebpack自定义打包入口

在这里插入图片描述
在这里插入图片描述

通过externals加载外部CDN资源

内容分发网络（Content Delivery Network，CDN）是建立并覆盖在因特网之上的一层特殊网络，专门用于通过因特网高效传递丰富的多媒体内容，对因特网中的信息流进行优化，从而提高网络的使用效率。
在这里插入图片描述

externals排除某些包让它们不被打包到最终的文件里面去，而是去windows全局查找这些对象直接使用
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
大大减少了依赖项占用内存：
之前：
在这里插入图片描述
之后：
在这里插入图片描述

通过CDN优化ElementUI的打包

在这里插入图片描述
在这里插入图片描述

首页内容定制

在vue.config.js中声明一个参数isProd，根据这个参数来自定制页面如何渲染
<%= %>代表输出
<% %>代表写正常的语句
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
bulid发布成功后，多了一个dist文件夹，dist就是发布的产品
在这里插入图片描述

路由懒加载

打包构建项目时，JS包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应组件，可以提高页面加载效率。

  1. 安装@babel/plugin-syntax-dynamic-import 包
npm install --save-dev @babel/plugin-syntax-dynamic-import

  1. 在babel.config.js配置文件中声明该插件
    在这里插入图片描述

  2. 将路由改为按需加载的形式
    示例代码：
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

项目上线

在这里插入图片描述

通过node创建web服务器

创建node项目，并安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹，托管静态资源即可。
npm init -y 初始化一个包管理配置文件
npm i express -S 安装一个第三方的包express
把vue_shop的发布文件夹dist复制到vue_shop_server中
创建app.js入口文件
在这里插入图片描述
打开网址 http://127.0.0.1显示空白页
根据报错进行修改：
在这里插入图片描述

  1. 修改引入的echarts CDN资源版本（最高5.4.3，没有5.5.1）
    在这里插入图片描述
  2. 将原来的externals中的vue、vueRouter、vueQuillEditor全部改成首字母大写
    在这里插入图片描述
  3. 在vue_shop中重新build得到dist文件，再复制到vue_shop_server中成功运行项目
    在这里插入图片描述

开启gzip配置

使用gzip可以减少文件体积，使传输速度更快。
可以通过服务器端使用Express做gzip压缩
npm i compression -S 安装相应包
在这里插入图片描述

配置HTTPS服务（一般由后台开发人员进行，前端了解即可）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用pm2管理应用

后台node server服务器被关掉，那么网站服务就停止了，再通过浏览器访问项目打不开

保留很多终端窗口可能难以管理，关闭终端窗口网站能够正常运行

PM2是常用的node进程管理工具，它可以提供node.js应用管理，如自动重载、性能监控、负载均衡等。同类工具有Supervisor、Forever等。

pm2是一个进程管理工具,可以用它来管理你的node进程，并查看node进程的状态，当然也支持性能监控，进程守护，负载均衡等功能。pm2基本是Nodejs应用程序不二的守护进程选择，事实上它并不仅仅可以启动Nodejs的程序，只要是一般的脚本的程序它同样可以胜任。

  1. 在服务器中安装pm2：
    踩坑：安装成功，但是无法正常使用。
    搜索后发现需要手动配置系统环境变量，一定要重启，另外这里也需要注意：
    首先搜索全局安装位置npm root -g：
C:\Windows\System32>npm root -g
D:\Program Files\nodejs\node_global\node_modules

然后把D:\Program Files\nodejs\node_global\添加到系统环境变量Path，多写一点都不会生效！
在这里插入图片描述

npm i pm2 -g

在这里插入图片描述

PS：谁懂我看到这里有多激动，整了快两天终于用上了pm2

  1. 启动项目命令：
pm2 start 脚本 --name 自定义名称

在这里插入图片描述
关掉终端后127.0.0.1能正常运行

  1. 查看运行项目：
pm2 ls

在这里插入图片描述

  1. 停止项目：
pm2 stop 自定义名称

在这里插入图片描述
网站就打不开了

  1. 重启项目：
pm2 restart 自定义名称

在这里插入图片描述
6. 删除项目：

pm2 delete 自定义名称

在这里插入图片描述

上传代码

git branch 查看当前所处分支 是master
git status 查看所有文件状态
git add . 把所有文件添加到暂存区
git commit -m "项目优化和上线" 提交代码，本地更新
git push 本地上传到云端

相关文章：

【前端项目笔记】10 项目优化上线

项目优化上线 目标&#xff1a;优化Vue项目部署Vue项目&#xff08;上线提供使用&#xff09; 项目优化 项目优化策略&#xff1a; 生成打包报告&#xff1a;根据生成的报告发现问题并解决第三方库启用CDN&#xff1a;提高首屏页面的加载效率Element-UI组件按需加载路由懒加…...

编程日记 2024/7/15 2:13:26

Qt基础控件总结—多页面切换(QStackWidget类、QTabBar类和QTabWidget类)

QStackedWidget 类 QStackedWidget 类是在 QStackedLayout 之上构造的一个便利的部件，其使用方法与步骤和 QStackedLayout 是一样的。QStackedWidget 类的成员函数与 QStackedLayout 类也基本上是一致的，使用该类就和使用 QStackedLayout 一样。 使用该类可以参考QStackedL…...

编程日记 2024/7/15 2:04:18

团队融合与业务突破

结束了在上海久事集团下属公司的《团队融合与业务突破》课程&#xff0c;不仅探讨了团队领导力的关键技巧&#xff0c;更重要的是&#xff0c;我们从业务协同的视角&#xff0c;在跨团队中如何达成了共识&#xff0c;结合系统思考的相关内容&#xff0c;让大家看到跨部门冲突的…...

编程日记 2024/7/15 2:03:17

mybatilsplaus 常用注解

官网地址 baomidou注解配置...

编程日记 2024/7/15 2:01:15

vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码

对文件加密并保存&#xff1a; import { sm4 } from sm-cryptofetch("你的文件地址") .then(response > response.blob()) .then(byteStream > {const reader2 new FileReader();reader2.onload function(event) {const arrayBuffer event.target.result;l…...

编程日记 2024/7/15 1:59:14

vue3实现无缝滚动列表（大屏数据轮播场景）

实现思路 vue3目前可以通过第三方组件来实现这个需求。 下面介绍一下这个第三方滚动组件--vue3-scroll-seamless vue3-scroll-seamless 是一个用于 Vue 3 的插件&#xff0c;用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动&#xff0c;适用于展示轮播图、新…...

编程日记 2024/7/15 1:56:11

element ui ts table重置排序

#日常# 今天带的实习生&#xff0c;在遇到开发过程中&#xff0c;遇到了element ui table 每次查询的时候都需要重置排序方式&#xff0c;而且多个排序是由前端排序。 <el-table :data"tableData" ref"restTable"> </<el-table> <script…...

编程日记 2024/7/15 1:54:09

python热门面试题三

面试题1&#xff1a;Python中的列表推导式是什么&#xff1f;请给出一个例子。 回答&#xff1a; 列表推导式&#xff08;List Comprehension&#xff09;是Python中一种非常强大且简洁的构建列表的工具。它允许你通过一个表达式来创建一个新的列表&#xff0c;这个表达式定义…...

编程日记 2024/7/15 1:53:08

sql monitoring 长SQL ASH AWR 都没有 未Commit or export to csv

Duration 4小时&#xff0c; Database Time 22.5&#xff0c; Session Inactive&#xff0c; 1.未Commit原因, 2.慢慢导出成csv文件&#xff1f; How is v$session status INACTIVE and v$sql_monitor status EXECUTING concurrently 2641811 Posts: 8 Jan 11, 2016 6:47P…...

编程日记 2024/7/15 1:51:07

算法学习day12(动态规划)

一、不同的二叉搜索树 二叉搜索树的性质&#xff1a;父节点比左边的孩子节点都大&#xff1b;比右边的孩子节点都小&#xff1b; 由图片可知&#xff0c;dp[3]是可以由dp[2]和dp[1]得出来的。(二叉搜索树的种类和根节点的val有关) 当val为1时&#xff0c;左边是一定没有节点的…...

编程日记 2024/7/15 1:50:06

Vue 3 ＜script setup＞ 使用v-bind（或简写为 :）来动态绑定图片的 src 属性

<img :src"images[currentIndex]" > <template> <div> <!-- 使用 v-bind 或简写为 : 来动态绑定图片的 src 属性 --> <img :src"images[currentIndex]" alt"Dynamic Image" style"width: 100px; height: a…...

编程日记 2024/7/15 1:46:02

​前端Vue自定义签到获取积分弹框组件设计与实现

摘要 随着前端技术的不断演进&#xff0c;开发的复杂性日益凸显。传统的整体式开发方式在面临功能迭代和修改时&#xff0c;常常牵一发而动全身&#xff0c;导致开发效率低下和维护成本高昂。组件化开发作为一种解决方案&#xff0c;通过实现模块的独立开发和维护&#xff0c;…...

编程日记 2024/7/15 1:42:59

闲置服务器废物利用_离线下载_私人影院_个人博客_私人云笔记_文件服务器

背景 家里有台旧windows笔记本&#xff0c;PentiumB940 2.00GHz的cpu 4G内存&#xff0c;512G硬盘 放在家里吃灰很久,最近几个月折腾折腾&#xff0c;装了linux操作系统&#xff0c;换了一个2T的硬盘 这里记录下折腾的过程,有需要的可以参考 开通公网IP 打电话给运营商一般都可…...

编程日记 2024/7/15 1:41:58

【Python学习笔记】调参工具Optuna + 泰坦尼克号案例

【Python学习笔记】调参工具Optuna&泰坦尼克号案例 背景前摇&#xff1a;&#xff08;省流可不看&#xff09; 最近找了份AI标注师的实习&#xff0c;但是全程都在做文本相关的活&#xff0c;本质上还是拧螺丝&#xff0c;就想着学点调参、部署什么的技能增加一些竞争力&a…...

编程日记 2024/7/15 1:38:55

GPT带我学-设计模式13-策略模式

概述 策略模式 例子 你可以创建一个策略工厂&#xff08;Strategy Factory&#xff09;来根据传入的 orgId 动态地选择合适的策略。以下是实现示例&#xff1a; 首先&#xff0c;定义策略接口和具体策略类&#xff1a; public interface CardPathStrategy {String generat…...

编程日记 2024/7/15 1:37:54

【Linux】Ubuntu配置JDK环境、MySQL环境

一、 Ubuntu配置JDK环境 在Ubuntu系统中安装JDK 8可以通过以下步骤进行&#xff1a; 打开终端。更新包列表&#xff1a; sudo apt update安装OpenJDK 8&#xff1a; sudo apt install openjdk-8-jdk验证安装是否成功&#xff1a; java -version注&#xff1a;如果系统中安…...

编程日记 2024/7/15 1:32:48

【ElasticSearch】ES 5.6.15 向量插件支持

参考 : https://github.com/lior-k/fast-elasticsearch-vector-scoring 下载插件 安装插件 插件目录&#xff1a; elasticsearch/plugins, 安装后的目录如下 plugins└── vector├── elasticsearch-binary-vector-scoring-5.6.9.jar└── plugin-descriptor.properties修…...

编程日记 2024/7/15 1:29:45

Kafka 高并发设计之数据压缩与批量消息处理

《Kafka 高性能架构设计 7 大秘诀》专栏第 6 章。 压缩&#xff0c;是一种用时间换空间的 trade-off 思想&#xff0c;用 CPU 的时间去换磁盘或者网络 I/O 传输量&#xff0c;用较小的 CPU 开销来换取更具性价比的磁盘占用和更少的网络 I/O 传输。 Kafka 是一个高吞吐量、可扩展…...

编程日记 2024/7/15 1:27:44

设计模式使用场景实现示例及优缺点（行为型模式——模板方法模式）

模板方法模式&#xff08;Template Method Pattern&#xff09; 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法的骨架&#xff0c;将算法的一些步骤延迟到子类中。这样可以在不改变算法的结构的前提下…...

编程日记 2024/7/15 1:26:43

ETL数据集成丨主流ETL工具(ETLCloud、DataX、Kettle)数据传输性能大PK

目前市面上的ETL工具众多&#xff0c;为了方便广大企业用户在选择ETL工具时有一个更直观性能方面的参考值&#xff0c;我们选取了目前市面上最流行的三款ETL工具&#xff08;ETLCloud、DataX、Kettle&#xff09;来作为本次性能传输的代表&#xff0c;虽然性能测试数据有很多相…...

编程日记 2024/7/15 1:25:41

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/12/15 11:25:33

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/12/12 7:18:42

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/12/10 4:05:13

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/12/14 7:26:20

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/12/15 16:22:57

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/11/26 20:46:42

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/11/9 14:40:17