零基础学Vue--day13项目优化

1. 项目优化策略

• 生成打包报告，根据报告优化项目
• 第三方库启用CDN加载
• Element-UI组件按需加载
• 路由懒加载
• 首页内容定制

1.1 添加进度条

依赖 -->运行依赖 -->安装nprogress插件 npm安装方法: npm install --save nprogress

// main.js-->导入 NProgress包，对应的 js(实现效果)和css(美化样式) 
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

//请求在到达服务器之前，调用 use中的回调函数，添加请求头信息
axios.interceptors.request.use(config => {  
  NProgress.start() //显示进度条
  //为请求头，添加 token验证的 Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  return config //必须返回 config
})
//response拦截器，表示请求已结束，隐藏进度条
axios.interceptors.response.use(config =>{  
  NProgress.done() //隐藏进度条
  return config
})

1.2 解决 ESLint语法错误

1. 'i3' is defined but never used //'i3'定义没使用
2. "[" and "]" to be on the same line //[]要在一行显示
	ESLint和代码格式化工具，之间有冲突 .prettierrc文件，新增 "printwidth"配置项 
    {
        "semi":false,
        "singleQuote":true,
        "printWidth":200 //一行最多显示200个字符，超过会换行
    }
3. 'attr id' is not in camel case //'attr id' 不是驼峰命名

1.3 执行build

在项目 build阶段，会生成dist目录，用于生产环境的发布；发布阶段，移除所有 console信息；
依赖–>开发依赖 --> babel-plugin-transform-remove-console插件；

# babel.config.js
//项目发布阶段，需要用到的 babel插件
const productPlugins = []

//全等===，是发布阶段，添加移除console插件
if(process.env.NODE_ENV === 'production'){
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": ["@vue/app"],
  "plugins": [
    ["component", { "libraryName": "element-ui",
        			"styleLibraryName": "theme-chalk" }
    ],
    //展开运算符，把数组里的每一项展开，放到另一个数组中；开发阶段只是空数组；
    ...productPlugins  
  ]
}

1.4 生成打包报告

• 命令行形式生成打包报告
  vue-cli-service build --report //–report 选项可生成 report.html 以帮助分析包内容
• 在vue控制台查看打包报告
  “任务”=>“build”=>“运行” 运行完毕之后,点击右侧 “控制台”、“分析” 面板，查看报告；

1.5 修改webpack的默认配置

项目默认隐藏了 webpack配置项，如果需要修改 webpack配置，在根目录中，创建 vue.config.js 文件

/*默认情况下，vue项目的开发模式和发布模式，共用同一个打包入口文件 (src/main.js)；为了将项目的开发过程     (src/main-dev.js)，与发布过程(src/main-prod.js)分离，我们为两种模式，各自指定打包入口文件；
 *在 vue.config.js 中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack 的打包配置；   chainWebpack节点， 通过链式编程的形式，修改webpack配置；configureWebpack节点， 通过操作对象的形     式，修改webpack配置；两者作用相同；
 *把 main.js，分别重命名为 main-dev.js和 main-prod.js */
module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry得到默认的打包入口，clear清空默认打包入口，add新增一个打包入口文件
            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')
        })
    }
}

1.6 通过 externals 节点，加载外部 CDN 资源

• 通过 import语法，导入的第三方依赖包，都会被打包到同一个文件中 (js/chunk-vendors.**.js)，导致该文件体积过大；
• 可以通过 webpack 的 externals 节点，加载外部的 CDN 资源，凡是声明在 externals 节点中的，第三方依赖包，都不会打包到 js/chunk-vendors.**.js 文件中；

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            config.entry('app').clear().add('./src/main-prod.js')
			//只有发布模式，才有必要配置'externals'排除项，排除某些包，不被打包到最终文件里 
            config.set('externals',{
                //包的名字: 查找全局对象的名字，
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                lodash:'_', //全局对象的名字，在哪里配置？'_'又是什么意思
                echarts:'echarts',
                nprogress:'NProgress',
                'vue-quill-editor':'VueQuillEditor'
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

设置好排除后，为了可以使用 vue，axios等内容，以加载外部 CDN的形式，解决引入依赖项；
开发入口文件 main-prod.js 中，注释掉引入的代码

# 字体图标和全局样式为什么不剪切走；
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//将element-ui中的组件，通过CDN的形式来加载，减小打包后的体积；在index.html 的头部，通过CDN加载element-ui的 js 和css样式
//import './plugins/element.js'

//导入字体图标
import './assets/fonts/iconfont.css'
//导入全局样式
import './assets/css/global.css'

//导入第三方组件 vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid'

//导入进度条插件 对应的 js和css
import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'

// 导入axios
import axios from 'axios'

// 导入vue-quill-editor（富文本编辑器）
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器 对应的样式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

在 public/index.html 的头部，添加如下 CDN资源引用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>电商后台管理系统</title>

  <!-- 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" />
       
  <!-- element-ui 的样式表文件 --> 为什么element-ui是js和css两个，两个的网络路径又在哪里找？？
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-
   chalk/index.css" />

  //是'externals'节点里，对应的js文件吗？应用路径又在哪里确定？查找全局对象的名字大小写、'-' 怎么配置？
  <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>

  <!-- element-ui 的 js 文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
</head>
<body>
  <noscript>
    <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. 
     Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
</body>
</html>

1.7 自定制首页内容

开发环境中，使用的是 import 加载第三方包；而发布环境，使用的是 CDN；那么首页，也需根据不同的环境，进行不同的实现；(通过 html插件，定制首页内容)

# vue.config.js
module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件html
            config.plugin('html').tap(args=>{
                //args[]追加自定义属性isProd
                args[0].isProd = true
                return args
            })
        })

        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')

            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

index.html中，使用插件，判断是否为发布环境，并定制首页内容

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
// <%= 输出；插件的具体名称.参数项.挂载的具体参数；

//按需加载外部CDN资源，开发模式下，外部资源，直接通过import导入的
<% if(htmlWebpackPlugin.options.isProd){ %>
<link rel="stylesheet" 
 href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
........
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
<% } %>

1.8 路由懒加载

• 当路由被访问时，才加载对应的路由组件；
• 实现步骤：
  依赖 -->开发依赖 --> 安装 @babel/plugin-syntax-dynamic-import 插件
  babel.config.js中 配置该插件

const productPlugins = []

if(process.env.NODE_ENV === 'production'){
  productPlugins.push("transform-remove-console")
}

module.exports = {
    ... ... ...
    //配置路由 懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

将路由改为，按需加载的形式

# router.js
import Vue from 'vue'
import Router from 'vue-router'

// import Login from './components/Login.vue'
// import Home from './components/Home.vue'
// import Welcome from './components/Welcome.vue'
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ 
    					   './components/Login.vue')
//const 组件名 = import(/*路由的分组，相同的分组名称，会一起打包*/ '路由组件的存放路径')
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ 
    					  './components/Home.vue')
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */ 
    						 './components/Welcome.vue')

const Cate = () => import(/* webpackChunkName:"goods" */ './components/goods/Cate.vue')
const GoodAdd = () => import(/* webpackChunkName:"goods" */ './components/goods/Add.vue')
... ... ...

2. 项目上线

2.1 通过 node 创建 web 服务器
创建 vue_shop_server 文件夹，存放 node服务器

1. 终端: npm init -y 初始化包管理配置文件 --> npm i express -S
2. 把 dist文件夹，复制到 vue_shop_server中
3. 创建 app.js文件 

    const express = require('express')
    //创建 web服务器
    const app = express()

    //app.use()注册中间件；将 vue打包生成的 dist文件夹，托管为静态资源；
    app.use(express.static('./dist'))

    //启动 web服务器
    app.listen(8998,()=>{
        console.log("server running at http://127.0.0.1")
    })
终端: node .\app.js 启动服务器

2.2 开启 gzip 文件传输压缩

1. 终端：npm i compression -D //安装响应包

   const express = require('express')
2. const compression = require('compression') //导入包 
   const app = express()

   //注册中间件 一定要写到，静态资源托管之前，否则不生效；
3. app.use(compression())
   app.use(express.static('./dist'))

   app.listen(8998,()=>{
      console.log("server running at http://127.0.0.1:8998")
   })

2.3 配置 https 服务

配置 https服务，一般是后台进行处理，前端了解即可；
首先，申请 SSL证书 https://freessl.cn (个人免费官网)
在后台导入证书，(复制素材中的，两个文件到 vue_shop_server；注意：证书有问题，无法使用 https服务)
打开app.js文件，编写代码导入证书，并开启https服务

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//创建配置对象设置公钥和私钥
const options = {
    cert: fs.readFileSync('./full_chain.pem'), //公钥
    key: fs.readFileSync('./private.key') //私钥
}

app.use(compression())
app.use(express.static('./dist'))

// app.listen(8998,()=>{
//     console.log("server running at http://127.0.0.1:8998")
// })

//启动https服务
https.createServer(options,app).listen(443)

2.4 pm2 管理服务器上的 网站应用
终端: npm i pm2 -g //安装pm2
终端: pm2 start app.js启动脚本/入口文件 --name 自定义名称 //使用pm2启动项目，关掉窗口，项目正常运行
pm2 ls //查看运行项目
pm2 restart id/自定义名称 //重启项目
pm2 stop id/自定义名称 //停止项目
pm2 delete id/自定义名称 //删除项目