前端项目优化及上线

根据自己项目实际，进行webpack配置，这里只是一个参考，关于上线很多功能作为了解。

优化问题

项目优化策略步骤及详解安装配置

1.生成打包报告=>为了直观发现项目中的问题，共有两种方式
2.第三方库启用CDN => 通过externals加载外部CDN资源
3.Elemet-ui组件按需加载 =>通过cdn的形式优化Element-ui的打包
4.路由懒加载1.安装@babel/plugin-syntax-dynamic-import包2.在babel.config.js配置文件中声明该插件3.将路由改为按需加载的形式，
5.首页内容定制

1.增加加载进度条

安装nprogress包
1.在请求拦截中使用nprogress.start（）
2.在响应拦截中使用nprogress.done()

2.在bulid阶段中使用transform-remove-console移除所有的console

安装babel-plugin-transfrom-remove-console
1.在babel.config.js配置文件中添加plugins“transform-remove-console”
//按需在生产环境下需要使用到的插件，但是开发环境下不需要使用，可以定义个数组，判断在生产环境将插件导入到数组中，将生产环境下数组展开到babel.config.js配置文件中，具体例子如下：

// 解决只在发布阶段需要用到的babel插件
const prodPlugins = []if (process.env.NODE_ENV === 'production') {prodPlugins.push('transform-remove-console')
}
module.exports = {presets: ['@vue/cli-plugin-babel/preset',],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk',},],// 发布产品时候的插件数组...prodPlugins,],
}

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

开发模式和发布模式，共同一个打包的入口文件（main.js），为了将项目开发和发布过程分离，为两种模式，各自指定打包的入口文件，即为：
1.开发模式的入口文件为：src/main-dev.js
2.生产模式的入口文件为：src/main-prod.js

configureWebpack和chainWebpack

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来定义webpack的打包配置这里，configureWebpack或chainWebpack的作用相同，位移区别就是他们修改webpack配置的方式不同：
1.chainWebpack通过链式编程的形式，来修改默认的webpack配置
2.configureWebpack通过操作对象的形式，来修改默认的webpack配置

通过chainWebpack自定义打包入口,新增一个vue.config.js的webpack配置文件

// 通过chainWebpack自定义打包入口
module.exports = {chainWebpack: config => {config.when(process.env.NODE_ENV === 'production', config => {config.entry('app').clear().add('./src/main-prod.js')})config.when(process.env.NODE_ENV === 'development', config => {config.entry('app').clear().add('./src/main-dev.js')})},
}

4.通过externals加载外部CDN资源，这样配置需要资源的时候就会直接在window全局寻找

导入的第三方包，最终会打包到一个文件中，从而导致文件体积过大
//解决问题通过webpack的externals，来配置加载外部的CDN资源，凡是声明在externals的第三方包，都不会被打包

//在vue.config.jswebpack配置文件生成环境下生成
config.set('externals', {vue: 'Vue',axios: 'axios','vue-router': 'Vuerouter',lodash: '_',echarts: 'echarts',nprogress: 'Nprogress','vue-quill-editor': 'VueQuikkEditor',})

同时需要在public/index.html文件的头部，添加如下的CDN的资源引用

也需要在public/index.html文件的头部，添加如下的CDN的资源引用

<!-- nprogress 的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /><!-- 富文本编辑器 的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /><link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" /><script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script><script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script><script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script><!-- 富文本编辑器的 js 文件 --><script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script></head>

5.通过cdn的形式优化Element-ui的打包，这样就会在网络上去加载element-ui的组件

1.在生产入口文件中，注释掉element-ui按需加载的代码，
2.在index，html的头部区域中，通过cdn加载element-ui的js和css样式

6.首页内容定制

不同的打包环境下，首页内容不同，通过插件方式定制
在vue.config.js文件中不同模式下配置args
//生产为ture
config.plugin('html').tap(args => {args[0].isProd = truereturn args})
//开发为falseconfig.plugin('html').tap(args => {args[0].isProd = falsereturn args})然后在indextitle标签的中设置
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev- '%>电商后台管理系统</title><% if(htmlWebpackPlugin.options.isProd) { %>这里面包裹的是cdn的引入<% }%>
这样就可以在开发环境不渲染这里面的cdn，生产环境下就会运行内部的cdn代码

7.路由懒加载

在打包构建项目时，js包会变得非常大，影响页面加载，将不同的路由对应的组件分隔成不同的代码块，然后路由访问时才加载对应的组件，更加高效
解决方案：
1.安装@babel/plugin-syntax-dynamic-import包
2.在babel.config.js配置文件中声明该插件
3.将路由改为按需加载的形式，

安装路由懒加载
npm install --save-dev @babel/plugin-syntax-dynamic-import//然后在babel.config.js配置文件中导入插件
'@babel/plugin-syntax-dynamic-import',

在routes文件中将路由方式导入成下面的形式，并将之前的组件导入方式注释掉
// import Login from '@/views/login.vue'
const Login = () =>import(/* webpackChunkName: "login_home_welcome" */ '@/views/login.vue')
"login_home_welcome"：为每一个分组的名字，同一个名字的会打包到同一文件中

以上项目基本完成，后面开始项目上线！！！！！

项目上线

项目上线相关配置步骤

1.通过node创建web服务器
2.开启gzip配置
3.配置https服务
4.使用pm2管理应用

1.通过node创建web服务器

创建node项目，安装express，通过express创建web服务器，将vue打包生成dist文件夹，托管为静态资源即可

1.在项目文件同目录下创建一个后缀为serve的文件夹
2.使用vscode打开该文件终端，@npm init -y 初始化生成package.json文件
3.@npm i express 安装express
4.将项目原文件夹中dist目录复制到serve文件中

5.在serve在vscode创建一个app.js文件
// 导入express
const express = require('express')
const app = express()// 将dist文件托管为静态资源
app.use(express.static('./dist'))// 启动服务器，相应在80端口,指定端口号并启动服务器
app.listen(3001,()=>{console.log('serve running ar http://127.0.0.1:3001')
})
//通过node .\app.js测试文件运行，如果打印'serve running ar http://127.0.0.1:3001'表示服务器启动成功
//2.通过http://127.0.0.1在网页上访问就可以该打包的项目了
//3.测试完毕然后使用nodemon .\app.js这样服务器就跑起来了

//注意事项：
//1.一定在打包时，要将基准路由模式改为hash模式，
//2.并且关闭apache服务器，不然浏览器会默认在apache服务器上去找本地地址的文件，
//3.还有在vue.config.js文件的配置externals加载外部CDN资源的config中的英文大小写写对，不然文件找不到包资源
//4.如果修改后重新打包更换serve文件中的dist文件，再次运行node .\app.js即可

解决打包后数据不显示的处理方式

修改各个包资源版本号通过packjson中的版本号赋值给index文件中引入的CDN引入的版本号即可，然后通过上述注意事项中的4步来执行，再来执行即可

2.开启gzip配置

减少文件体积，传输速度更快
通过服务端使用express做gzip压缩，配置如下：
1.安装 @npm i compression -D
2.在app.js中配置及注意事项如下：

// 导入express
const express = require('express')
// 导入gzip压缩包
const compression = require('compression')
const app = express()
// 一定要将compression使用在托管静态资源之前，才会生效
app.use(compression())
// 将dist文件托管为静态资源
app.use(express.static('./dist'))
// 启动服务器，相应在80端口,指定端口号并启动服务器
app.listen(3001,()=>{console.log('serve running ar http://127.0.0.1:3001')
})//再次启动大的资源就会被压缩

3.配置HTTPS服务

1.//声明一点：
在真实开发时，这个配置是后端来配置的，比如java，python，php在部署时开启https，这一步骤作为了解

2.为什么启动https服务

传统的http协议传输是明文的，不安全
采用https协议对传输的数据进行加密处理，防止数据被中间人窃取，使用更加安全

3.需要申请ssl证书（http://freessl.org）
一般企业使用的是需要钱申请的
1.个人申请进入https://freessl.cn/官网，输入申请的域名并选择品牌
2.输入自己的邮箱并选择相关选项
3.在买的服务器上验证DNS（在域名管理后台添加TXT记录）
4.验证通过，下载ssl证书（full_chai.pem公匙；private.key私钥）

3.后台项目中导入证书

// 导入express
const express = require('express')
// 导入https和文件读取方法fs
const https = require("https")
const fs= require('fs')
// 导入gzip压缩包
const compression = require('compression')
const app = express()
// 创建一个option对象
const options = {// 使用文件读取同步的方式cert:fs.readFileSync('./full_chain.pem'),key:fs.readFileSync('./private.key')
}
// 一定要将compression使用在托管静态资源之前，才会生效
app.use(compression())
// 将dist文件托管为静态资源
app.use(express.static('./dist'))
// 启动服务器，相应在80端口,指定端口号并启动服务器
// app.listen(3001,()=>{//     console.log('serve running ar http://127.0.0.1:3001')
// })
// 创建服务器对象,将两个钥匙文件对象作为第一个参数，将创建express对象作为第二个参数，监视https的默认端口443
https.createServer(options,app).listen(443)

4.上线-使用pm2管理应用

1.在服务器上安装pm2：@npm i pm2-g （全局安装该工具）
2.启动项目：pm2 start 脚本--name 自定义名称（脚本：入口文件）
3.查看运行项目：pm2ls
4.重启项目 pm2 restart 自定义名称
5.停止项目 pm2 stop 自定义名称
6.删除项目 pm2 delete 自定义名称

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6Wr5D2j-1645259290588)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220219161705144.png)]

会生成：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RKnu71XN-1645259290589)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220219162325070.png)]

当status为online时，关闭该窗口，这样就不用运行自己运行，后台会自动给我们运行该web
每次重启通过pm2 ls查看name和id重启服务器
不想要这个网站对外发布pm2删除该网站

项目逻辑

1.使用二维码扫码登录

基本逻辑（首先需要两台服务器）
1.浏览器向服务器请求登录二维码，浏览器收到请求，产生随机字符串，
2.服务器将产生的字符串作为key值，存在redis服务器
3.存储成功后，字符串和登录验证接口生成二维码返回给网页
4.当成功后，将二维码包含的字符串作为参数每隔一秒请求一次服务器
5.用户用手机扫码得到字符串，将用户的信息一起发给服务器
6.手机服务器收到请求通过字符串去redis服务器将用户的信息作为value值存入
7.当每隔一秒请求查询到用户信息和密码查出，内部调用登录方法，生成用户token返回给浏览器
8.浏览器获得用户token，登录成功

前端项目打包优化及上线相关推荐

Vue项目从打包优化到上线部署云服务器的全过程（**教你在云服务器上优化部署自己的项目**）
前言作为前端开发人员,我们不仅要会写代码,优化打包,上线部署也是一个前端工程师必备的技能,这篇文章就教大家从零开始,把一个完整项目打包发布到线上服务器.首先的准备工作就是需要一台云服务器. 项目打包 ...
Vue Cli3 项目打包优化
1.项目优化实现步骤: 清除生产环境中的console.log语句生成打包报告,根据报告优化项目第三方库启用CDN 路由懒加载首页内容定制 2.执行build 2.1 清除生产环境中的cons ...
vue项目打包优化策略
vue项目打包优化策略使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载这是首先可以 ...
rust react tauri app 现有前端项目打包(windows)
现有前端项目打包环境配置 nodejs及相应包管理器(npm或yarn) rust 开发环境 WebView2 安装下载地址https://developer.microsoft.com/en-u ...
如何部署前端react项目到服务器,Vue、React前端项目打包部署
前端单页面应用部署前端打包上线部署方案之 hash路由模式对于hash路由模式打包的单页面应用,直接发布到服务器,使用nginx指向到对应文件目录即可,通用配置一般如下: location / { ...
记一次SPA项目打包优化的过程
前言在完成spa 项目打包上线后,最让人困扰的一个spa的缺点就是首屏加载事件过长,在之前的解决方案中我们通常是添加一个loading页面来减少用户等待所带来的焦虑感,但是这样的解决方案治标不治本, ...
antd 嵌套子表格_大型前端项目架构优化探索之路腾讯文档表格
腾讯文档表格是一个非常复杂的业务,它实现了传统 excel 的大部分核心功能,包括函数计算.条件格式.图表.智能分列等:除此之外还支持高效的多人协同编辑:它的代码量百万级别,启动也流程多达十几步.在前 ...
cdn加载vue很慢_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
html5怎么改为vue_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...

前端项目打包优化及上线