【前端项目笔记】10 项目优化上线
项目优化上线
目标：优化Vue项目+部署Vue项目（上线提供使用）
项目优化
项目优化策略：
- 生成打包报告：根据生成的报告发现问题并解决
- 第三方库启用CDN：提高首屏页面的加载效率
- Element-UI组件按需加载
- 路由懒加载
- 首页内容定制
为项目添加进度条效果
会用到第三方的包nprogress，添加loading效果
- 安装：
npm install --save nprogress
- 导入nprogress包
- 需要配置两个拦截器request（请求拦截器）和response（响应拦截器）
在请求拦截器request中调用NProgress.start()展示进度条
在请求拦截器response中调用NProgress.done()隐藏进度条
build 编译并压缩（用于生产环境）
在build时报错：
解决方法：解决Error: error:0308010C:digital envelope routines::unsupported的四种解决方案
使用方案4解决报错：
解决build警告
使用babel插件在项目build阶段把所有console移除
安装babel-plugin-transform-remove-console：
npm install babel-plugin-transform-remove-console --save-dev
但由于此插件的配置全局生效，意味着项目开发、测试、发布阶段都会移除console.log，不方便测试。需要将其设置为仅在发布阶段生效：
生成打包报告
为了直观看到项目中存在的问题
看到有哪些文件体积扩大，需要将其优化
如何优化项目的打开速度
通过vue.config.js修改webpack的默认配置
Webpack是一个模块打包工具，它的主要功能是分析项目结构，找到JavaScript模块以及其他浏览器不能直接运行的扩展语言（如SCSS、TypeScript等），并将它们打包为合适的格式以供浏览器使用。Webpack通过依赖关系图来管理非代码资源，如images或web字体等，并会把它们作为依赖提供给应用程序。每个模块都可以明确表述它自身的依赖，在打包时可根据依赖进行打包，避免打包未使用的模块。Webpack的优点包括拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置，扩展性强，插件机制完善，社区庞大，更新速度快，轮子丰富。
为开发模式与发布模式指定不同的打包入口
configWebpack和chainWebpack
通过chainWebpack自定义打包入口
通过externals加载外部CDN资源
内容分发网络（Content Delivery Network，CDN）是建立并覆盖在因特网之上的一层特殊网络，专门用于通过因特网高效传递丰富的多媒体内容，对因特网中的信息流进行优化，从而提高网络的使用效率。
externals排除某些包让它们不被打包到最终的文件里面去，而是去windows全局查找这些对象直接使用
大大减少了依赖项占用内存：
之前：
之后：
通过CDN优化ElementUI的打包
首页内容定制
在vue.config.js中声明一个参数isProd，根据这个参数来自定制页面如何渲染
代表输出
代表写正常的语句
bulid发布成功后，多了一个dist文件夹，dist就是发布的产品
路由懒加载
打包构建项目时，JS包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应组件，可以提高页面加载效率。
- 安装@babel/plugin-syntax-dynamic-import 包
npm install --save-dev @babel/plugin-syntax-dynamic-import
-
在babel.config.js配置文件中声明该插件
-
将路由改为按需加载的形式
示例代码：
项目上线
通过node创建web服务器
创建node项目，并安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹，托管静态资源即可。
npm init -y 初始化一个包管理配置文件
npm i express -S 安装一个第三方的包express
把vue_shop的发布文件夹dist复制到vue_shop_server中
创建app.js入口文件
打开网址 http://127.0.0.1显示空白页
根据报错进行修改：
- 修改引入的echarts CDN资源版本（最高5.4.3，没有5.5.1）
- 将原来的externals中的vue、vueRouter、vueQuillEditor全部改成首字母大写
- 在vue_shop中重新build得到dist文件，再复制到vue_shop_server中成功运行项目
开启gzip配置
使用gzip可以减少文件体积，使传输速度更快。
可以通过服务器端使用Express做gzip压缩
npm i compression -S 安装相应包
配置HTTPS服务（一般由后台开发人员进行，前端了解即可）
使用pm2管理应用
后台node server服务器被关掉，那么网站服务就停止了，再通过浏览器访问项目打不开
保留很多终端窗口可能难以管理，关闭终端窗口网站能够正常运行
PM2是常用的node进程管理工具，它可以提供node.js应用管理，如自动重载、性能监控、负载均衡等。同类工具有Supervisor、Forever等。
pm2是一个进程管理工具,可以用它来管理你的node进程，并查看node进程的状态，当然也支持性能监控，进程守护，负载均衡等功能。pm2基本是Nodejs应用程序不二的守护进程选择，事实上它并不仅仅可以启动Nodejs的程序，只要是一般的脚本的程序它同样可以胜任。
- 在服务器中安装pm2：
踩坑：安装成功，但是无法正常使用。
搜索后发现需要手动配置系统环境变量，一定要重启，另外这里也需要注意：
首先搜索全局安装位置npm root -g：
C:\Windows\System32>npm root -g D:\Program Files\nodejs\node_global\node_modules
然后把D:\Program Files\nodejs\node_global\添加到系统环境变量Path，多写一点都不会生效！
npm i pm2 -g
PS：谁懂我看到这里有多激动，整了快两天终于用上了pm2
- 启动项目命令：
pm2 start 脚本 --name 自定义名称
关掉终端后127.0.0.1能正常运行
- 查看运行项目：
pm2 ls
- 停止项目：
pm2 stop 自定义名称
网站就打不开了
- 重启项目：
pm2 restart 自定义名称
6. 删除项目：
pm2 delete 自定义名称
上传代码
git branch 查看当前所处分支 是master
git status 查看所有文件状态
git add . 把所有文件添加到暂存区
git commit -m "项目优化和上线" 提交代码，本地更新
git push 本地上传到云端
