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

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

news 2025/10/26 23:39:53

项目优化上线

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

项目优化

项目优化策略：

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

为项目添加进度条效果

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

安装：

npm install --save nprogress

导入nprogress包
需要配置两个拦截器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包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应组件，可以提高页面加载效率。

安装@babel/plugin-syntax-dynamic-import 包

npm install --save-dev @babel/plugin-syntax-dynamic-import

在babel.config.js配置文件中声明该插件
将路由改为按需加载的形式
示例代码：

在这里插入图片描述

项目上线

在这里插入图片描述

通过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显示空白页
根据报错进行修改：

修改引入的echarts CDN资源版本（最高5.4.3，没有5.5.1）
将原来的externals中的vue、vueRouter、vueQuillEditor全部改成首字母大写
在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的程序，只要是一般的脚本的程序它同样可以胜任。

在服务器中安装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

启动项目命令：

pm2 start 脚本 --name 自定义名称

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

查看运行项目：

pm2 ls

在这里插入图片描述

停止项目：

pm2 stop 自定义名称

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

重启项目：

pm2 restart 自定义名称

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

pm2 delete 自定义名称

在这里插入图片描述

上传代码

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

项目优化上线

项目优化

为项目添加进度条效果

解决build警告

生成打包报告

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

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

configWebpack和chainWebpack

通过chainWebpack自定义打包入口

通过externals加载外部CDN资源

通过CDN优化ElementUI的打包

首页内容定制

路由懒加载

项目上线

通过node创建web服务器

开启gzip配置

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

使用pm2管理应用

上传代码

相关文章：