前言：

本篇文档主要适用于Vue前端的优化，通过CDN,路由懒加载，图片压缩，GIZP压缩以后，达到降低部署到服务器上的前端项目的包体积大小，因为包体积大小直接影响了项目首次打开的速度，并且前端文件体积变小，也意味着 CSS文件和JS文件也变小了，下载速度会更快，同理网页加载速度也就会变得更快，因此我们必须将每一个上线的前端项目都进行优化！

项目优化策略：

1.使用vue ui生成打包报告，查看项目打包情况

1.1 在命令行输入命令 vue ui

image.png

1.2 在vue 可视化窗口中选择我们需要查看的项目

image.png
image.png

1.3 选择指定的项目，点击任务image.png

1.4 选择build命令，并点击运行

image.png
image.png

1.5 打包完毕，查看项目打包情况


image.png

1.6 小结

我们使用vue ui 这个可视化界面主要的目的是总体预览一下项目中哪里需要被优化，尤其是js的体积会严重的影响我们项目打开的速度！

2.引入外部CDN资源

2.1 什么是CDN && 为什么使用CDN:

如果我们自己制作的网站需要挂在到服务器上供其他人使用，要怎样才能让你的用户在访问你的网址时更加快速呢？
有两种方法:
第一：让你的文档尽可能地小或少，这样整个传输速度就会有所提升。
第二：尽可能让你的文档离最终用户所在的位置近一些，这样整个传输路径就会大大减短。
公有云厂商在全世界各地都遍布不计其数都数据中心和服务器，CDN服务简单来讲就是这些厂商将你的服务器上面的文档分发到他们不同地区的服务器的当中。
每个地区可以称为一个节点，这样用户在访问你的网址时，浏览器发送的请求就会优先绕去离客户最近的节点来获取数据，这样方便客户更快的速度访问网站。
CDN的全称是 Content Delivery Network，即内容分发网络，CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

2.2 将项目中的依赖改写成从CDN下载

2.2.1 什么样的资源会被打包到js文件中

image.png

项目的依赖项会被我们打包到 js/chunk-vendors.js 如果我们不对项目的依赖进行处理，那么项目依赖项都会打包到js中，导致js文件无比巨大！

2.2.2 为什么会有很多依赖打包到 js/chunk-vendors.js

image.png

简而言之就是我们在 Vue项目中的 main.js中使用 import 命令引入的第三方的库和样式最终都会被打包放到 js文件中。

2.2.3 将项目依赖从项目中抽离，使用CDN提供的第三方库

如何将依赖项从项目中抽离呢，很简单，只需要将抽离的依赖全部注释掉，同时在 vue.config.js中添加需要从CDN引用的依赖库，并且修改 项目中 public/index.html，在其中添加CDN提供的依赖地址即可。

在main.js中注释需要CDN引入的第三方库
image.png

在vue.config.js中指定需要CDN引入的第三方库的名字，这里只是做演示，从CDN引入 vue、vue-riyter,和 axios
image.png

  1. module.exports = {
  2.   chainWebpack: config => {
  3.     //指定需要挂载的第三方库 格式：  第三方库名 ：'库在项目中的别名'
  4.     config.set('externals', {
  5.       // ElementUI:'ElementUI'
  6.       vue: 'Vue',
  7.       'vue-router': 'VueRouter',
  8.       axios: 'axios',
  9.     })
  10.   }
  11. }
  12. //代码用到了Webpack的相关知识，大家有需要可以去网上查

在项目的 public/index.html 网页中，引入CDN提供的第三方库的地址
image.png
image.png

注意：
我们从CDN引入的第三方库的时候，一定要注意第三方库的版本号，否则会出错！！
我们可以在自己项目的package.json文件中查看自己项目引入的第三方库的版本号
ElementUI不需要在externals中引入，是因为ElementUI自身就可以通过CDN引入（这一点在ElementUI官网中有写）

3.开启路由懒加载

3.1 为什么需要路由懒加载

为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

3.2 路由懒加载原理

懒加载简单来说就是延迟加载路由或按需加载路由，即在需要的时候的时候进行加载，不需要就先不进行加载，这样可以加快项目网页的加载速度。
举个例子：
一个路由文件分为五大块 A,B,C,D,E ,如果没有懒加载路由的话，我们项目运行的时候会将五个路由模块都进行加载，如果加载一个路由模块需要2秒时间，那么5个路由模块共需要10秒加载时间，那么用户初次打开项目就需要等待10秒。
如果开启路由懒加载，那么用户初次打开项目可能就仅仅需要A路由模块加载就可以，那么项目就只会进行A模块的加载，那么用户只需要等待2秒钟即可，这样就可以提升项目的加载速度，提升用户的体验度。

3.3 代码中如何设置路由懒加载

image.png

  1.  {
  2.         path: '/news-list',
  3.         component: () => import(/* webpackChunkName: "contributor" */'../pages/contributor/news-list.vue')
  4.       },
  5.       {
  6.         path: '/section-list',
  7.         component: () => import(/* webpackChunkName: "editor" */'../pages/editor/section-list.vue')
  8.       },
  9.       {
  10.         path: '/section-info',
  11.         name: 'section-info',
  12.         component: () => import(/* webpackChunkName: "editor" */'../pages/editor/section-info.vue')
  13.       },
  14.       {
  15.         path: '/preview-section',
  16.         name: 'preview-section',
  17.         component: () => import(/* webpackChunkName: "editor" */'../pages/editor/preview-section.vue')
  18.       }

我们通过给每个路由都指定一个 webpackChunkName 即可，就是将同一个模块的 路由地址都统一命名，如图中的 editor 模块 。

4.图片压缩

提供一个网站，可以用来压缩图片：https://tinypng.com/，之后在项目中使用压缩之后的图片

5.前端启用GZIP

5.1 什么是GZIP

GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

5.2 GIZP在前端的作用

当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了，效果就是你点击网址后会很快的显示出来相关内容。

5.3 前端如何开启GIZP压缩

5.3.1 安装 compression-webpack-plugin 插件

  1. npm install compression-webpack-plugin

5.3.2 在 vue.config.js中进行设置

image.png

  1. const CompressionWebpackPlugin = require("compression-webpack-plugin");
  2. const productionGzip = true;
  3. const productionGzipExtensions = ["js", "css"];
  4. module.exports = {
  5.   configureWebpack: {
  6.     plugins: [
  7.       new CompressionWebpackPlugin({
  8.         filename: '[path].gz[query]', // 生产的gzip资源名
  9.         algorithm: 'gzip',  // 压缩算法
  10.         test: new RegExp('\\.(' + ['js', 'css', 'png'].join('|') + ')$'), // 匹配文件名 匹配到的会进行压缩
  11.         threshold: 102, // 对0.1K以上的数据进行压缩
  12.         minRatio: 0.8,  // 压缩率
  13.         deleteOriginalAssets: false /* process.env.NODE_ENV == 'production' // 是否删除源文件 */
  14.       })
  15.     ]
  16.   }
  17. }

5.3.3 在服务器的 nginx中 开启GZIP压缩

image.png

5.4 查看是否成功开启GZIP压缩

直接运行项目，查看Network ,出现gizp表示就是开启成功
image.png

6.分环境打包

项目根据开发状态的不同，需要分别配置不同的环境，因为不同的环境如 开发环境、生产环境、测试环境，所有应的后端的地址都是不同的，因此为了方便开发和测试，我们必须将项目分环境进行配置。

6.1 项目中如何进行分环境配置

6.1.1 创建环境文件 .env.*

在项目的根目录下创建环境文件

开发环境配置文件 .env.development

生产环境配置文件 .env.production

测试环境配置文件 .env.test

image.png
image.png

环境变量中配置一些我们设置的变量，这些变量的值会根据打包的环境不同而产生不一样的值，如 VUEAPP_TITLE 这个值 可能在开发环境叫 development 但是在开发环境 可能叫 Production。
请大家注意，环境文件中的变量 都必须以 VUE_APP 开头，这是VUE官网上规定的！

6.1.2 创建不同环境对应的 main.js 文件

因为开发过程中，因为环境的不同，我们可能临时需要一些第三方的库，并且某些库不会在生产的环境中使用，那么我们如何区分不同环境引用不同的第三方库呢，这时候就需要将main.js文件按照环境的不同而调用不同的main.js了。

开发环境配置文件 main-dev.js
image.png
生产环境配置文件 main-prod.js
image.png
测试环境配置文件 main-test.js

测试环境截图同上，暂不显示

我们明显的看的出来，开发环境的main-dev.js明显比生产环境的 main-prod.js文件 多了许多引用，这就是为什么我们需要区分不同环境的main.js，因为随着我们项目的变大，如果所有环境公用一个main.js的话，就会产生耦合，不方便开发和测试，所以我们需要分而治之，区分环境，方便开发。

6.1.3 在vue.config.js中配置根据打包命令切换不同的main.js文件

image.png

6.1.4 在package.js 中创建不同的环境打包命令

在我们配置好不同的 .env文件和不同的main.js文件以后，我们需要最后配置一下启动不同环境的命令，告诉vue，什么时候需要启动什么环境。

image.png

  1. "scripts": {
  2.     "serve": "vue-cli-service serve --mode development",
  3.     "prod": "vue-cli-service serve --mode production",
  4.     "test": "vue-cli-service serve --mode test",
  5.     "build": "vue-cli-service build --mode development",
  6.     "build-prod": "vue-cli-service build --mode production",
  7.     "build-test": "vue-cli-service build --mode test"
  8.   }

7.优化后的最终效果

image.png

浏览器缓存带来的项目更新问题

在前端开发中遇到一个问题，已经发版的项目，在浏览器显示的是旧版的页面，需要刷新或者清除一下缓存才可以得到更新后的资源，这是因为浏览器有缓存机制，当缓存没有失效且静态资源文件名没有发生改变时，会去请求缓存中的内容，那如何解决这个问题呢？
很简单，让每次的文件名不同（在文件名后添加时间戳）

1.打包后的静态资源添加时间戳

vue.config.js文件中添加代码：

  1. const Timestamp = new Date().getTime();
  3. configureWebpack: {
  4.     output: { // 输出重构  打包编译后的 文件名称  【模块名称.时间戳】
  5.       filename: `[name].${Timestamp}.js`,
  6.       chunkFilename: `[name].${Timestamp}.js`
  7.     }
  8. }

打包后的效果：
image.png
这样的话，由于每次构建之后静态资源文件名不同，就会重新向服务器请求资源。
image.png
image.png
image.png