18-vue-cli -项目优化策略-项目上线
项目优化策略：
1.ESLint语法报错代码换行了，ESlint与VScode代码格式化冲突如何解决？
2.npm run build生产环境下，出现console的warning警告，去掉console
3.通过CND方式引入，webpack中的externals中声明不让第三方依赖包打包后全部合并到一个JS文件中
4.通过CND的形式优化element-ui
5.首页内容自定制，首页优化，通过内置的html插件，添加属性，判断执行环境的不同，决定加载不加载CDN
6.路由懒加载
一、ESLint与VScode代码格式化冲突处理：
.prettierrc代码格式化配置介绍
简单说我们的VScode需要安装了ESLint，ESLint负责检查你写的是否规范。还要安装Prettier - Code formatter 这个插件，这个插件负责修正你的不规范。
二、生产环境下，不把console.log打包进文件中
第一步：安装插件
npm i babel-plugin-transform-remove-console --save-dev
第二步：在babel.config.js中配置
三、 vue脚手架内置了打包分析插件
在npm run build时，加上--report
会在dist文件夹下生成一个report.html文件
然后打开这个文件：
默认vuecli脚手架是没有提供webpack的配置文件的，需要自己手动去创建vue.config.js。
可以在module.exoprts={} 导出的这个对象中去新增：
configureWebpack 或 chainWebpack 节点去自定义webpack的打包配置，在这里面写的配置项最终都会合并到webpack的最终配置中。
这两个玩意的作用是一毛毛一样的，唯一的区别就是他们修改webpack配置的方式不同：
（1）configureWebpack 是通过操作对象的像是来修改默认webpack配置的
（2）chainWebpack 是通过链式编程的形式来修改webpack配置的。
分环境打包
四、通过externals加载外部CDN资源
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
如图：把所有JS文件合并到了一个文件中，体积很大。
如何优化呢？
为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包合并到最终的那个文件中去。
externals原理：
原本我们项目中依赖的第三方包如echarts,element-ui,vue，等等都会被打到一个JS文件中去，现在把这些第三方依赖项声明在了externals中后，那么在打包期间，
webpack会先检查externals中有没有声明第三方的依赖包，如果有的话，webpack就不会把对应的依赖包打到最终的那个vendor.chunk里面去。而是用到这个包的
时候会去全局window对象上查找去使用。如window.vue，window.axios
具体分为三步：
第一步：配置：把要用CDN方式引入的第三包罗列到externals中。以key value的形式
//生产环境下：
config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' })
第二步：需要在public/index.html文件的头部，添加CDN资源引用（css引入），就是在打包模板的html页面引入CDN
<!-- 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" />
然后要记住：
要把打包入口文件中原来通过 import 引入的依赖什么的，全部删除掉。
第三步：接第二步，还需要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>
上面说了，最终会去window对象上去找这些包，为什么呢？这里就迎刃而解了，他们都通过link或者script 引入，那么就是挂载到了window全局对象身上了（在window的全局作用域中）
三、通过CDN优化ElementUI的打包
如图：虽然上一步我们通过CND方式引入了第三方依赖，但是打出来的包还是有点大，我们发现是ElementUI
虽然在开发阶段，我们启用了element组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将element中的组件，也通过CDN的形式来加载，这样能够进一步减小打包后的体积。
具体做法：
第一步：在 main-prod.js 中，注释掉 element-ui 按需加载的代码
就是注释掉 import { xxx } from 'element-ui' ; Vue.use(xxx);
第二步：在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式
<!-- element-ui 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
五、首页内容定制
不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：
第一步：配置（其实这个插件就是HtmlWebpackPlugin），脚手架中自己集成了
第二步：在index.htm中，可以根据配置中添加的属性的值（isProd），来决定如何渲染页面结构
<!– 按需渲染页面的标题 --> <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
//在开发阶段不需要加载这些CND资源了，因为我们开发走的是dev的入口文件，dev的入口文件中都是import导入的第三方库，只有生产环境是走CDN。 <!– 按需加载外部的 CDN 资源 --> <% if(htmlWebpackPlugin.options.isProd) { %> <!—通过 externals 加载的外部 CDN 资源--> <% } %>
其实在index.html中直接用下面这种判断也可以
六、路由懒加载
当打包构建项目时，JS包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就变得更加高效了。
分为三步：
第一步：安装 @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')
项目上线准备：
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')
})
// 安装相应包
npm install compression -S
// 导入包
const compression = require('compression');
// 启用中间件
app.use(compression());
压缩后：
三. 配置 https 服务。
2.输入邮箱后。他会往你邮箱里发送一封邮件
3.生成了公钥和私钥
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);
为什么有与pm2？
因为如果我们现在把自己的电脑就当做一台线上的服务器，我启动的node服务器已经托管了我自己的前端项目，node服务就启动在了我的本机，我的本机的ip可以映射为一个我买的域名，这样只要我电脑不关，node服务启动着呢，任何人都可以通过地址访问到我的项目。
但是，如果我的node服务因为一些原因关闭了，那我这个网站项目就崩溃了别人就访问不到了，pm2进程守护应运而生。
或者我这台电脑上运行了不止一个服务，我怎么去管理他们呢？pm2又出现了。帮你管理进程
或者说我们平时用cmd运行一个程序时，有时候把cmd给关了，那么项目就运行不起来了，因为相当于cmd是开启了一个服务器，你把他给关了就相当于是关机了，还看个啥；或者说我们启动了好几个项目时，我们不想有那么多的cmd占位置，这时候pm2就是为了解决即使关掉了程序也不会停止。通过一些命令开启项目
PM2用法：
第一步：安装
在当前服务器（现在是本机你的电脑）上全局安装 npm i pm2 -g
第二步：启动pm2
启动项目: pm2 start 脚本 --name 自定义名称
启动我们的入口文件app.js，后面又起了一个自定义的名字是为了，一看这个名字就知道这个项目是干什么的了。
这时候我们关闭这个窗口，项目也能跑起来。
