2021 Vue全家桶开发电商管理系统（Element-UI）10-项目优化上线

素颜马尾好姑娘i 2023-01-07 13:24 198阅读 0赞

# 项目优化上线 #

# 1 项目优化 #

### 1.1 项目优化策略 ###

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

### 1.2 实现进度条 ###

**1.安装依赖**

![image-20210116172503027][]

**2.导入包和样式**

在main.js中：

![image-20210116173126719][]

**3.在拦截器中进行进度条控制**

![image-20210116173221479][]

### 1.3 Build命令后移除所有console ###

**安装并配置Babel插件**

官网可以查看该插件的文档：[babel-plugin-transform-remove-console][]

1.  安装插件：可选择Vue UI界面下载 或 CLI下载
    
    ![image-20210116175717930][]

![image-20210116175812049][]

**配置插件**

找到babel.config.js，在plugins中新增一个元素

![image-20210116180023910][]

**注意！这个配置有问题，由于该配置是全局的，在项目开发阶段也会移除console，有可能影响开发**

**解决方法：**

创建一个数组，当当前模式为发布模式时，增加在插件

![image-20210116180958241][]

### 1.4 生成打包报告 ###

![image-20210116181939678][]

推荐在UI面板查看

类别占比：

![image-20210116182131458][]

资源大小：

![image-20210116182240678][]

速度面板：（需要优化项目打开速度）

![image-20210116182326939][]

Asset资源大小：有两个js文件过大， 会导致页面打开速度非常慢

![image-20210116182414808][]

依赖项占比：

![image-20210116182522532][]

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

![image-20210116182735470][]

[https://cli.vuejs.org/zh/config/\#vue-config-js][https_cli.vuejs.org_zh_config_vue-config-js]

尝试使用vue.config.js进行配置：

1.  路径别名设置

链接：

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

![image-20210116204450314][]

![image-20210116204513995][]

**使用**

![image-20210116205037664][]

### 1.7 通过externals加载外部CDN资源 ###

![image-20210116205215448][]

只要把包声明在这里，不会将对应的包合并到文件，而是查找全局对象。

![image-20210116205240192][]

#### **使用** ####

由于只有在发布模式才需要用到externals，所以把代码放在production中

![image-20210116205618420][]

config.set('externals', { 
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
    })

删除引用的包的样式表，在public.index.html文件的头部，添加如下CDN资源引用

![image-20210116205820265][]

![image-20210116220517422][]

配置完毕后我们来观察打包报告：

资源和依赖项所占内存明显减少

![image-20210116223148957][]

![image-20210116223222429][]

### 1.8 通过 CDN 优化 ElementUI 的打包 ###

虽然在开发阶段，我们启用了 element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加

载的组件，还是占用了较大的文件体积。此时，我们可以将 element-ui 中的组件，也通过 CDN 的形式来加

载，这样能够进一步减小打包后的文件体积。

具体操作流程如下：

① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码

② 在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式

<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" />
    
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

![image-20210116223536518][]

我们再来检查打包报表

![image-20210116223728127][]

### 1.9 首页内容自定制 ###

不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：

chainWebpack: config => { 
     config.when(process.env.NODE_ENV === 'production', config => { 
     config.plugin('html').tap(args => { 
     args[0].isProd = true
     return args
     })
     })
     config.when(process.env.NODE_ENV === 'development', config => { 
     config.plugin('html').tap(args => { 
     args[0].isProd = false
     return args
     })
     })
    }

在 public/index.html 首页中，可以根据 isProd 的值，来决定如何渲染页面结构：

<!– 按需渲染页面的标题 -->
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
    <!– 按需加载外部的 CDN 资源 -->
    <% if(htmlWebpackPlugin.options.isProd) {  %>
    <!—通过 externals 加载的外部 CDN 资源-->
    <% } %>

### 1.10 路由懒加载 ###

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成

不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

**方法1**

具体需要 3 步：

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

② 在 babel.config.js 配置文件中声明该插件。

③ 将路由改为按需加载的形式，示例代码如下：

webpackChunkName为分组，Foo和Bar为一组，打包到一个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

安装开发时依赖：

![image-20210116225537412][]

配置插件

![image-20210116225709766][]

**方法2**

或直接使用ES6写法：

const Home = () => import('../components/Home')

分散成了很多个js

![image-20210116230443339][]

## 2 项目上线 ##

### 2.1 项目上线相关配置 ###

1.  通过node创建web服务器
2.  开启gzip配置
3.  配置https服务

##### **1.通过 node 创建 web 服务器** #####

1.创建一个文件夹

npm init -y

2.创建 node 项目，并安装 express，通过 express 快速创建 web 服务器

npm i express -y

3.将 vue 打包生成的 dist 文件夹

4.创建一个app.js，托管为静态资源即可，关键代码如下：

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')
    })

5.node运行app.js

node app.js

![image-20210116231413648][]

服务器启动成功

#### ！！！此时样式出现问题 ####

![image-20210116232809097][]

原因：![image-20210116232834929][]

![image-20210116232857440][]

检查了一下代码 …原来是直接粘贴老师pdf中的引入script的代码出现了乱码，把’-'符号变成了方括号

### 2.2 开启gzip配置 ###

使用 gzip 可以减小文件体积，使传输速度更快。

② 可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：

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

角色列表有问题，

原因Element-ui版本不对，将Index.html中导入的设置为当前项目的版本。

![image-20210116235342857][]

![image-20210116235406086][]

### 2.3 配置HTTPS服务（一般来说是后端完成） ###

为什么要启用 HTTPS 服务？

 传统的 HTTP 协议传输的数据都是明文，不安全

 采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全

**申请 SSL 证书（https://freessl.org）**

① 进入 https://freessl.cn/ 官网，输入要申请的域名并选择品牌。

![image-20210117145054234][]

![image-20210117145006737][]

② 输入自己的邮箱并选择相关选项。

③ 验证 DNS（在域名管理后台添加 TXT 记录）。

④ 验证通过之后，下载 SSL 证书（ full\_chain.pem 公钥；private.key 私钥）。

**在后台项目中导入证书**

把下载下来的full\_chain.pem 公钥；private.key 私钥粘贴到文件根目录中

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.4 使用pm2管理应用 ###

① 在服务器中安装 pm2：npm i pm2 -g 全局安装

② 启动项目：pm2 start 脚本 --name 自定义名称

③ 查看运行项目：pm2 ls

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

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

⑥ 删除项目：pm2 delete 自定义名称

![image-20210117164400783][]

[image-20210116172503027]: /images/20221119/597fc30f9c83437d9a2138d58551c2c4.png
[image-20210116173126719]: /images/20221119/0590d628f4b14a21aad2ae81e8ac91e6.png
[image-20210116173221479]: https://img-blog.csdnimg.cn/img_convert/35cdccafbd690c7bed80f05d695ca659.png
[babel-plugin-transform-remove-console]: https://www.npmjs.com/package/babel-plugin-transform-remove-console
[image-20210116175717930]: https://img-blog.csdnimg.cn/img_convert/c40496c7394421d0794d569fe5a5578c.png
[image-20210116175812049]: https://img-blog.csdnimg.cn/img_convert/41bfc636ceee36cfcf47a40cc751acef.png
[image-20210116180023910]: https://img-blog.csdnimg.cn/img_convert/bd8ae2f862327038c37dde6b3c2b4389.png
[image-20210116180958241]: https://img-blog.csdnimg.cn/img_convert/56cdece89c746d2a3c9f87e71fd6c90c.png
[image-20210116181939678]: https://img-blog.csdnimg.cn/img_convert/5cb3b884f83c5c5d0f143b429b8f6fc4.png
[image-20210116182131458]: https://img-blog.csdnimg.cn/img_convert/336c06d02d90acb43b3b4336d1730c58.png
[image-20210116182240678]: https://img-blog.csdnimg.cn/img_convert/cd6433373c46fdc62082fec455d516f7.png
[image-20210116182326939]: https://img-blog.csdnimg.cn/img_convert/be03862e2a4a2bbce5e982c5bafbadf0.png
[image-20210116182414808]: https://img-blog.csdnimg.cn/img_convert/e613603b87a88a4240645ade3b57b5e5.png
[image-20210116182522532]: https://img-blog.csdnimg.cn/img_convert/883bd69429cb2f93b3d49cacc5950f9e.png
[image-20210116182735470]: https://img-blog.csdnimg.cn/img_convert/9400f47eef0dd36678facc62de179a9e.png
[https_cli.vuejs.org_zh_config_vue-config-js]: https://cli.vuejs.org/zh/config/#vue-config-js
[image-20210116204450314]: https://img-blog.csdnimg.cn/img_convert/1fdfbae5de3300e452c1a65d87b137c1.png
[image-20210116204513995]: https://img-blog.csdnimg.cn/img_convert/796e2f45b5c63074506b17bc80bbfa5a.png
[image-20210116205037664]: https://img-blog.csdnimg.cn/img_convert/cfd1858acf5de952b5ad2883c8e79c8b.png
[image-20210116205215448]: https://img-blog.csdnimg.cn/img_convert/7e2af283cc1605bb6e01abc94222ce89.png
[image-20210116205240192]: https://img-blog.csdnimg.cn/img_convert/9d33d2e1ca626ab46fc53b2141c13116.png
[image-20210116205618420]: https://img-blog.csdnimg.cn/img_convert/d29d1dfb49eb3b835a64e087f2524a4d.png
[image-20210116205820265]: https://img-blog.csdnimg.cn/img_convert/2cb30c48d529feb3ac5b4a4737aee93d.png
[image-20210116220517422]: https://img-blog.csdnimg.cn/img_convert/9d2bcb92ebed391189b464b49181e991.png
[image-20210116223148957]: https://img-blog.csdnimg.cn/img_convert/d785d2d9bfb04fcaa372a165e1f87612.png
[image-20210116223222429]: https://img-blog.csdnimg.cn/img_convert/edb19739452439b503ee1223e8348a96.png
[image-20210116223536518]: https://img-blog.csdnimg.cn/img_convert/6219192a306c12b0b38243a2b2496a7b.png
[image-20210116223728127]: https://img-blog.csdnimg.cn/img_convert/ee1a102dd416c9b5e9ec8feee500880d.png
[image-20210116225537412]: https://img-blog.csdnimg.cn/img_convert/fc14c5f859069d21c52f1105b3aa24c5.png
[image-20210116225709766]: https://img-blog.csdnimg.cn/img_convert/4cc4cf49de46bf50ee5704d685e51c35.png
[image-20210116230443339]: https://img-blog.csdnimg.cn/img_convert/0308d7690425b7d976f5ad85aeea4c68.png
[image-20210116231413648]: https://img-blog.csdnimg.cn/img_convert/c5fbcb662cf58d7e94c2a892025f74c0.png
[image-20210116232809097]: https://img-blog.csdnimg.cn/img_convert/3508dd2aa2fdda677534bfd37c313a26.png
[image-20210116232834929]: https://img-blog.csdnimg.cn/img_convert/231e765f44458117582a81f6e17e5c6e.png
[image-20210116232857440]: https://img-blog.csdnimg.cn/img_convert/8c9d99035422682462e7a37db270af80.png
[image-20210116235342857]: https://img-blog.csdnimg.cn/img_convert/57814609049349933fbb6a9dae84f2ce.png
[image-20210116235406086]: https://img-blog.csdnimg.cn/img_convert/bac3e6c015e334f439315edcad3e61d4.png
[image-20210117145054234]: https://img-blog.csdnimg.cn/img_convert/2fd52a1344e17f53b47ccb9719855651.png
[image-20210117145006737]: https://img-blog.csdnimg.cn/img_convert/1466be52c8493ac8e4a17b131f968dc6.png
[image-20210117164400783]: https://img-blog.csdnimg.cn/img_convert/a61bbdd2e4f6f7eec5c55d3d654e1dfd.png