项目优化+上线（掌握了么？）

系统管理员 2023-02-24 11:23 18阅读 0赞

## 目标 ##

> 了解vue项目的优化过程  
> 能够将web项目部署到服务器

## 一. 优化vue项目 ##

##### 1. 生成打包报告，根据报告优化项目 #####

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。

**1.1 生成报告的方式有两种**：

1.  通过命令行参数的形式生成报告  
    // 通过 vue-cli 的命令选项可以生成打包报告  
    // --report 选项可以生成 report.html 以帮助分析包内容  
    `vue-cli-service build --report`
2.  通过可视化的UI面板直接查看报告（推荐）  
    在可视化的UI面板中，通过`控制台和分析面板`，可以方便地看到项目中所存在的问题。

示例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]

**1.2 就打包完成后常见警告做处理**：

▶：对于项目中遗留的`console.log()`语句，打包时会出现警告。如果比较多，移除起来也相对麻烦，如果手动移除，开发时又无法正常打印，此时我们就可以用到插件`babel-plugin-transform-remove-console`，它可以在项目build阶段移除所有的console信息。  
①：打开项目控制台，点击依赖->开发依赖，输入`babel-plugin-transform-remove-console`，安装  
②：打开`babel.config.js`，编辑代码如下：

//# 项目发布阶段需要用到的bable插件
    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,
            //# 路由懒加载
            '@babel/plugin-syntax-dynamic-import'
        ]
    }

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

对于生成的打包报告，警告为：资源超出了最佳限制尺寸(资源太大)，如果处于`生产环境`资源一定要尽可能的优化，进而增加资源请求效率。但对于`开发环境`，我们不做过多追求（方便开发为目的）。so，我们要为`生产环境与开发环境单独进行配置`。

▶：为开发模式与发布模式`指定不同的打包入口`  
默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 `src/main.js`）。为了将项目  
的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：  
① `开发模式`的入口文件为 `src/main-dev.js`  
② `发布模式`的入口文件为 `src/main-prod.js`

▶：通过`vue-cli 3.0`工具生成的项目，默认隐藏了所有`webpack 的配置项`，目的是为了`屏蔽项目的配置过程`，让程  
序员把工作的重心，放到具体功能和业务逻辑的实现上。  
如果程序员有`修改 webpack 默认配置的需求`，可以在项目`根目录`中，按需`创建 vue.config.js`这个配置文件，从  
而对项目的`打包发布过程做自定义的配置`（更多配置参考：[ https://cli.vuejs.org/zh/config/\#vue-config-js][https_cli.vuejs.org_zh_config_vue-config-js]）。

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

##### 3. 通过 externals 加载外部 CDN 资源（第三方库启用CDN） #####

默认情况下，通过 `import`语法导入的`第三方依赖包`，最终会被`打包合并`到同一个文件中，从而导致打包成功  
后，单`文件体积过大`的问题。

▶：为了解决上述问题，可以通过`webpack 的 externals`节点，来配置并加载外部的 CDN 资源。凡是声明在  
`externals` 中的第三方依赖包，都不会被打包。

①：在`vue.config.js`中的`生产环境`写入需要加载的`外部CDN资源`

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

②：同时，需要在`public/index.html`文件的头部，添加`CDN 资源引用`(此处以nprogress为例)：

<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
     
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>

**注意**：资源的css文件要在js文件之前引入

##### 4. Element-UI组件按需加载 #####

▶：虽然在开发阶段，启用 `element-ui 组件的按需加载`，可以尽可能的减少了`打包的体积`，但是那些被按需加  
载的组件，还是`占用了较大的文件体积`。此时，我们可以将 element-ui 中的组件，也`通过 CDN 的形式`来加  
载，这样能够`进一步减小打包后的文件体积`。

① ：在 `main-prod.js`中，`注释掉 element-ui` 按需加载的代码  
② ：在 `index.html`的头部区域中，通过`CDN 加载 element-ui 的 js 和 css 样式`

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

**经过上述一顿操作，项目打包后的体积总算是达标率**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]

##### 5. 路由懒加载 #####

文件体积虽然过关，但加载速度还是有值得优化的地方，对于路由，我们应该采用：路由懒加载（按需导入）的方式，用到再加载，避免了无端的加载。

▶：当`打包构建项目时`，JavaScript 包会变得非常大，影响页面加载。如果我们能把`不同路由对应的组件分割成 不同的代码块`，然后当路由被访问的时候才加载对应组件，这样就`更加高效`了。了解路由懒加载：[https://router.vuejs.org/zh/guide/advanced/lazy-loading.html][https_router.vuejs.org_zh_guide_advanced_lazy-loading.html]

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

const Login = () => import ( /* webpackChunkName: "Login_Home_Welcome" */ '../components/Login.vue')
    const Home = () => import ( /* webpackChunkName: "Login_Home_Welcome" */ '../components/Home.vue')
    const Welcome = () => import ( /* webpackChunkName: "Login_Home_Welcome" */ '../components/Welcome.vue')

**注意**：此处把`Login/Home/Welcome` 分为一组，当访问其中任意一个组件，都会加载其他组件（分组根据项目情况而定）

##### 6. 首页内容定制 #####

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

module.exports = { 
        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 - ' %>我的app</title> <!– 按需加载外部的 CDN 资源 --> <% if(htmlWebpackPlugin.options.isProd) {  %>
    <!—通过 externals 加载的外部 CDN 资源-->
    <% } %>

**注意**：此处用到的是原始语法的`模板引擎`

## 二. 部署项目 ##

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

创建 `node 项目`，并安装 `express`，通过 `express 快速创建 web 服务器`，将 vue 打包生成的 dist 文件夹，  
托管为静态资源即可（注意所有项目均可，此处介绍vue项目）

const express = require('express')
    const app = express()
    
    app.use(express.static('./dist'))
    app.listen(80, () => { 
        console.log('服务器启动，请访问:http://127.0.0.1')
    })

##### 2. 开启gzip压缩 #####

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

▶：可以通过服务器端使用 Express 做 gzip 压缩

①：安装相应包：`npm install compression`  
②：导入包，并设置

const compression = require('compression')
    //# 写在静态托管资源之前
    app.use(compression())

压缩前后对比：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]  
**文件传输大小相差明显**

##### 3. 配置https服务 #####

▶：启用https服务的理由：

①：传统的 `HTTP 协议`传输的数据都是`明文，不安全`  
②：采用 `HTTPS 协议`对传输的`数据进行了加密处理`，可以防止数据被中间人窃取，使用更`安全`

▶：配置https服务

① ：进入 [https://freessl.cn/ ][https_freessl.cn_]官网，输入要申请的域名并选择品牌。  
② ：输入自己的邮箱并选择相关选项。  
③ ：验证 DNS（在域名管理后台添加 TXT 记录）。  
④ ：验证通过之后，下载 SSL 证书（ 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);

**注意**：https默认端口号443，此操作一般由后端工程师开发。

##### 4. 使用pm2管理应用 #####

对于node搭建的服务器，终端窗口一旦关闭，服务器就停止运行。可`pm2`就可以很好的解决此问题，用pm2管理服务器后，可以任意关闭终端，服务器依旧正常访问。其次pm2 还有服务器记录，方便我们对其就行管理

▶：pm2 操作命令：

① ：在服务器中安装 pm2：npm i pm2 -g  
② ：启动项目：pm2 start 脚本 --name 自定义名称  
③ ：查看运行项目：pm2 ls  
④ ：重启项目：pm2 restart 自定义名称（也可是id）  
⑤ ：停止项目：pm2 stop 自定义名称  
⑥ ：删除项目：pm2 delete 自定义名称

部分示例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]

**注意**：id 同样可以操作被pm2 管理的应用

#### 最后：嘿，一起加油，共同进步 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]: /images/20230209/adadeb4c4f08476d9c9c57988ddcc001.png
[https_cli.vuejs.org_zh_config_vue-config-js]: https://cli.vuejs.org/zh/config/#vue-config-js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]: /images/20230209/17d81f05e8154c94807961aef85db6b9.png
[https_router.vuejs.org_zh_guide_advanced_lazy-loading.html]: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200710181538699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[https_freessl.cn_]: https://freessl.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200710174718799.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200710174745773.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70