2.project（前端项目） ----> 2.1 env（本地环境）    ----> 2.2 skill（技术选型） ---->   2.3 config(项目配置)
      |                        |                          |                           |
      |                        2.1.1 node                 2.2.1 cli(脚手架)            2.3.1 package.json
      |                        |                          |
      |                        2.1.2 npm(包管理器)         2.2.2 react(全家桶)
      |                        |                          |
      |                        2.1.3 vscode(编辑器)        2.2.3 ui
      |                                                   |
      |                                                   2.2.4 mock
      |
    3.code（项目开发）    ----> 3.1 devlopment（代码开发） ----> 3.2 debugger（代码调试）
      |                        |                          |
      |                        3.1.1 eslint(规范)          3.2.1 devtool（谷歌浏览器）
      |                        |                          |
      |                        3.1.2 optimize(优化)        3.2.2 vue tool
      |                        |                          |
      |                        3.1.3 page(多/单页应用)      3.2.3 postman
      |                        |                          |
      |                        3.1.4 module(模版)          3.2.4 vscode
      |
    4.store（项目管理）   ----> 4.1 version（版本控制）----> 4.2 remote（远程存储）
      |                        |                          |
      |                        4.1.1 git（版本控制）        4.2.1 gitlab
      |
    5.deploy（项目部署）  ----> 5.1 env（项目环境） ----> 5.2 auto(自动部署)   ----> 5.3 way(部署方式)
      |                        |                          |                         |
      |                        5.1.1 dev/sit/prod(环境)    5.2.1 genkins             5.3.1 nginx

🏷️ 问题一：本地开发环境请求服务器接口跨域的问题

    利用webpack中proxy配置本地代理解决跨域问题

🏷️ 问题一：打包文件中有大量未使用过的 UI 组件

    配置按需加载，页面使用组件时单个引入使用

🏷️ 问题 二：如何优雅的只在当前页面中覆盖ui库中组件的样式

🏷️ 问题 三：打包之后文件、图片、背景图资源不存在或者路径错误的问题

🏷️ 问题 一：一个文件的代码很多，既存在应用数据的读取和处理，又存在数据的显示，而且每个组件还不能复用

    数据的请求和数据的展示都在一个组件进行，要实现组件的复用，我们就需要将展示组件和容器组件分离出来

🏷️ 问题 一：打包后的入口文件加载比较慢，经过分析发现是入口文件体积比较大，需要优化入口文件体积

    可以配置多入口来分流文件

🏷️ 问题 一：html 页面有些变量在不同的环境会有不同的值，这些变量是在 webpack 中不同环境中配置好的，打包后会从不同环境中取值

    可以在html页面配置一个通用模板来解析这些变量

🏷️ 问题一：在一个项目中会发现同一个功能的工具类方法，会有很多种写法，逐渐的项目里就累积了很多重复的工具类方法（防抖、节流、深拷贝...），其他开发接手需要从头看这些方法的用法

    使用 lodash 函数库替代自己写的方法、日期相关处理推荐使用moment.js

🏷️ 问题一：某些需求比较抽象复杂，前端界面比较统一（toB项目），前端静态页面很快就写好了，需要等后端好久才能提供接口，然后边联调边进行逻辑部分开发，延长了开发周期

    前端写好静态页面后，可以在后端不提供接口的情况下，用接口文档自己mock数据，完成后面的逻辑部分开发，待后端完成接口后前端与之联调，加快开发进度

🏷️ 问题一：开启gzip压缩代码

    这时前端需要在本地模拟线上发布环境，配置启动 nginx，访问本地的打包文件，验证通过后进行发布

🏷️ 问题一：在某个重要的环境，紧急修改了某个问题，由于某种原因需要直接发布到这个环境，跳过了前面的环境验证，结果运维发布了页面出现了问题，访问不了。

    这时前端需要在本地模拟线上发布环境，配置启动 nginx，访问本地的打包文件，验证通过后进行发布

🏷️ 问题二：每一次更新都需要清除浏览器缓存才能看到效果

    部署时，生成项目版本号存于项目某个文件中，当页面打开时一直请求这个文件，隔一段时间与浏览器本地存储的版本号做对比，有差异就更新页面