电商后台管理系统的项目优化

项目优化策略

1.生成打包报告
2第三方库启用CDN
3.elementui 组件按需加载
4路由懒加载
5首页内容定制

1为项目添加进度条

1）安装 nprogress包
vue ui 运行依赖 搜nprogress 点击安装
2）导包

// 导入Nprogress包对应的JS 和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3，在axios 拦截器配置 发起请求的时候进度条显示和响应数据成功的时候进度条隐藏

2优化：解决Serve 命令的提示错误

1.很多都是因为没有达到eslint标准规范要求的 所以建议一开始的时候就安装eslint 标准规范验证代码规范性 在写代码的过程中解决

3优化 在执行build 命令期间移除所有的console 也就是线上生产环境我们不需要console

1先安装插件
2使用
在babel 配置文件中输入代码

但是这样存在问题，在开发阶段和生产阶段都会触发这行代码以至于开发阶段看不到console输出调试 现在改进只在生产环境中移除console

正式开式

一.生成打包报告？
为什么? 是为了直观看到项目的问题，可以在打包时生成报告 生成报告的方式有两种

1. 通过命令行参数的形式生成报告
   
   2)通过可视化的ui面板直接查看报告（推荐）
   在可视化的ui面板中 通过控制面板和分析面板 可以方便看到项目中所存在的问题
   
   二.通过vue.config.js修改webpack的默认配置
   通过vue-cli 3.0工具生成的项目 默认隐藏所有webpack的配置项 目的是为了屏蔽项目的配置过程 让程序员把工作的重心放到具体的功能和业务逻辑
   
   三，为开发模式与发布模式指定不同的打包入口

四.通过external加载外部资源 CDN
默认情况下通过import语法导入的第三方依赖包 最终回被打包合并到同一个文件中 从而导致打包成功后 单文件体积过大的问题
为了解决上述问题 可以通过webpack的externals 节点 来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包 都不会被打包

制定首页内容


实现路由懒加载
当打包构建项目时 javascript 包会变得非常大 影响页面加载 如果我们能把不同的路由对应的组件分割成不同的代码块 然后路由被访问的时候才加载对应组件 这样就更加高效了

① 安装 @babel/plugin-syntax-dynamic-import 包。
② 在 babel.config.js 配置文件中声明该插件。
③ 将路由改为按需加载的形式，示例代码如下：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

关于路由懒加载的详细文档，可参考如下链接：
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

二项目上线配置
1通过node创建web服务器
2开启gzip配置
3配置https服务
4使用PM2管理服务

1. 通过 node 创建 web 服务器
   创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生成的 dist 文件夹，
   托管为静态资源即可，关键代码如下：

const express = require('express')
// 创建 web 服务器
const app = express()
// 托管静态资源
app.use(express.static('./dist'))
// 启动 web 服务器
app.listen(80, () => {
console.log('web server running at http://127.0.0.1')
})

2. 开启 gzip 配置
   使用 gzip 可以减小文件体积，使传输速度更快。
   ② 可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：

// 安装相应包
npm install compression -S
// 导入包
const compression = require('compression');
// 启用中间件
app.use(compression());

2.1 项目上线相关配置
3. 配置 HTTPS 服务
 传统的 HTTP 协议传输的数据都是明文，不安全
 采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全

4. 配置 HTTPS 服务
   ① 进入 https://freessl.cn/ 官网，输入要申请的域名并选择品牌。
   ② 输入自己的邮箱并选择相关选项。
   ③ 验证 DNS（在域名管理后台添加 TXT 记录）。
   ④ 验证通过之后，下载 SSL 证书（ full_chain.pem 公钥；private.key 私钥）

5. 配置 HTTPS 服务
   在后台项目中导入证书

const https = require('https');
const fs = require('fs');
const options = {
cert: fs.readFileSync('./full_chain.pem'),
key: fs.readFileSync('./private.key')
}
https.createServer(options, app).listen(443);

2.1 项目上线相关配置
6. 使用 pm2 管理应用
① 在服务器中安装 pm2：npm i pm2 -g
② 启动项目：pm2 start 脚本 --name 自定义名称
③ 查看运行项目：pm2 ls
④ 重启项目：pm2 restart 自定义名称
⑤ 停止项目：pm2 stop 自定义名称
⑥ 删除项目：pm2 delete 自定义名称