Vue项目探讨(搭建+工程优化)

[mominger]

Vue项目图解

按照图示各项，构建一个通用的，经过工程优化的脚手架

1. 基于Vue-Cli 4搭建

• 1.1 创建

  //全局安装 vue-cli脚手架
  npm install -g @vue/cli
  
  //创建项目
  vue create vue-cli4-project

• 1.2

  Default 比较单薄，选择 Manually select features手动预设

• 1.3

  选择Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter
  Babel ES6转ES5,项目必备
  Router 路由,项目必备
  Vuex store,项目必备
  CSS Pre-processors 使用 sass/less/stylus 写样式必备
  Linter / Formatter 负责代码规范，多人开发建议打开

• 1.4

  选 2.x
  3.x 有兼容问题。待release版本出来再考虑。

• 1.5

  选择history模式

• 1.6

  选择css预处理器

• 1.7

  选择代码规范

• 1.8
  

  选 lint on save 保存时检查，它会在命令行中报警.
  默认需运行 npm run lint 修复代码格式
  如果使用vscode，安装插件 ESLint,它会读取根目录下eslintrc.js 文件，保存时能自动格式化代码。
  Lint and fix on commit 提交时自动修复。过于自动，应格式化后审查下比较好。

• 1.9

  选 In dedicated config files 各功能在根目录下有专门的配置文件

• 1.10

  保存预设模板，下次创建vue项目可以直接选此预设，无需再配置

• 1.11

  npm / yarn 都可以，看公司习惯

• 1.12

  等待依赖安装完成
  vue.config.js需要手动创建
  assets 目录会经过webpack编译；static不会，它直接导出

2. 工程优化

仅按项目脑图上 效率、性能、质量下的每小项阐述，不会增加更多内容
比如性能优化实际上有很多手段: 各级缓存、加载瀑布图....等都很重要，但本文不会涉及
核心是构建一个通用的，经过优化的脚手架

2.1 模块隔离

• 2.1.1 路由 => 页面组件(code-splitting)

  组件(模块)隔离: 适合简单业务

  • 观察路由配置
    
    / webpackChunkName: "about" / 是指将 code-splitting后的代码取名字,默认是自增整数0.js,1.js,2.js...
  • 观察目录结构

• 2.1.2 路由 => (嵌入)模块路由 => 模块

  模块隔离: 适合一般业务
  路由仍集中放到一起

  • 观察路由配置
    

  路由入口文件

  ![router_2_conf_businessA](https://gitee.com/ttwb/MyPublic/raw/master/img/20200906173406.png)  
  > 模块路由文件  
  > 模块businessA以 ES6的展开运算符(spread operator)形式注入

  • 观察目录结构

    看对应源码

• 2.1.3 路由 => (指向)模块路由 => 模块

  模块完全隔离: 适合复杂业务
  模块路由放入模块目录里

  • 观察路由配置
    
    路由入口文件

  

  模块路由文件
  每个模块里配置一个单独的路由文件

  • 观察目录结构

  [看对应源码](https://github.com/mominger/vue-cli4-project/tree/complicated-module-seperate)

2.2 数据(vuex)组织

• 2.2.1 数据集中处理

  项目通常只有用户+少部分数据，才需要跨页面组件或模块共享
  所以一般采用将store各元素拆分，给项目统一提供
  好处是一眼明白项目数据的复杂度

  

• 2.2.2 数据按模块处理

  如果各模块大又复杂，需要共享的数据很多，应拆分成单独store,modules 导入

  

  看对应源码

2.3 网络请求

• 2.3.1

  基于axios定义基础库
  请求拦截: 注入token 鉴权
  响应拦截: 通用异常码处理

  

  • 2.3.2

    在vue.config.js 设置本地跨域

    

  • 2.3.3

    定义各模块的请求文件

    

  • 2.3.4

    具体在组件里的用法

    

    看对应源码

2.4 异常处理

• 2.4.1

  同步代码产生的异常会自动捕获
  异步，如Promise产生的异常的，需手动vm.$throw抛出

  看对应源码

2.5 鉴权

• 2.5.1 请求鉴权

  在2.3.1.1 图里通过axios的请求拦截，注入了token，然后在响应拦截里对异常码做了处理。
  没有登录跳向登录
  token过期，两种处理，一种也是直接跳向登录，另一种是将req状态缓存，先刷新token，再重新发起一次请求。

• 2.5.2 路由鉴权

  路由拦截处理

  

  登录页的处理

  看对应源码

2.6 组件优化

• 2.6.1 全局组件自动化注册

  全局组件的定义方式

  

  扫描全局组件自动注册，此文件会在入口main.js被引入 business-a-page-a/index.vue 有全局组件的测试

• 2.6.2 mixin抽取

  mixin 可以抽取公共功能，再以组合模式注入组件。即指抽取组件的公共部分。但是它极容易难以维护，因为难以轻松判断它对组件的影响。
  建议用mixin必须写好注释，且在非常必要才这么做。比如页面的'加载中'。
  下面仅是技术上的用法举例: mixin抽取对store里token的读取(不推荐这么读store）

  

  定义mixin 注入到组件

  看对应源码

2.7 按需编译

• 2.7.1
  

  package.json里命令执行 编译脚本

  

  按需加载模块脚本

  看对应源码

  2.8 一键部署

• 2.8.1

  根据各公司运维，各有不同。
  如gitlab打标签，jekins 执行shell脚本拉源码->打包->部署->运行
  如java tomcat运行，前端oss/obs，或容器化nginx+CDN

  2.9 打包分析

• 2.9.1
  

  vue-cli3后，可直接在build加report，然后dist里浏览器打开report.html

  

  分析图，下面还有一种使用webpack插件的方式
  vsCode安装Import Cost插件，可以看到实时导入包的大小

• 2.9.2
  

  使用webpack插件进行打包分析，推荐用这种，可控性更强

  

  分析图
  也可以在build时才打包分析，但是注意，webpack插件会影响shell脚本自动化部署。因为使用此插件，会让脚本无法判定打包结束。

  看对应源码

  2.10 CDN化

• 2.10.1

  • 2.10.1.1 第三方包CDN化

    在public/index.html 引入cdn包，然后webpack照此配置就可以

  • 2.10.1.2 静态资源托管CDN

    正常是通过部署到oss/obs,或nginx+cdn，即实现了全站CDN vue.config.js 也可以配置 publicPath 为cdn域名

    看对应源码

  2.11 gzip压缩

• 2.11.1.1

  通常我们只会在 nginx配置gzip压缩，即在服务器压缩
  提前在打包时压缩为gzip，确实能省了服务器压缩所需的资源。个人认为无此必要
  gzip是压缩如js/css等静态资源
  webpack 安装 compression-webpack-plugin插件

  2.12 骨架屏

  Skeleton Screen是指页面数据加载完成前，给用户展示页面的大致结构(一般是灰色占位图),在拿到数据后,实际内容把它替换掉
  它等同于加载控件，本质上页面加载过程中的过渡效果
  避免造成网页长时间白屏

• 2.12.1 插件安装
  

  下载page-skeleton-webpack-plugin 依赖 puppeteer(chromium)包比较慢容易失败，多试几次。也可以尝试用cnpm单独安装puppeteer

  

  如图，修复插件不兼容的bug

  • 2.12.2 编辑骨架图

    npm运行后，在控制台通过toggleBar打开骨架屏预览界面

  

  • 2.12.3 模拟测试骨架图

    npm build后，在dist页面运行 http-server(需先安装)
    为了http-server 运行后正常访问，将.env.production文件里 VUE_APP_PUBLIC_PATH = './'

  

  如图，在无痕模式打开(避免缓存看不到效果)，慢速3G，可以明显看到骨架图的加载效果

• 2.12.4

  具体的使用方法参考
  插件github地址
  简单使用教程

  看对应源码

2.13 PWA

PWA(Progressive Web App)是google推出的渐进式webap，或称为下一代webapp 它不影响有网站功能 目前国内在线上极少运用此项技术，vue官网使用了，脚手架也提供了支持 安卓手机支持得比较好，苹果不是完全支持 以笔者mac环境，运行vue官网简单介绍它运用后的效果

• 2.13.1 仿app界面
• 2.13.2 离线缓存
• 2.13.3 缓存数据

  serviceWork 会设置缓存策略，比如是只读缓存，读缓存+更新数据，仅离线读缓存...等 它只支持采用fetch请求数据

• 2.13.4

  目前仅了解此项技术就够了，因为离线访问，网络很差，在我国基本不存在。而且缓存设置max-age,以及chrome的自身缓存(memory/disk)，都支持从本地读取数据

2.14 工具

PC端调试工具chrome DevTools，抓包工具Charles(Mac/Window)、Fiddler(Window Mac(功能简略))都是常见的调试工具，不再赘述

与腾讯的vConsole,相比，eruda强大很多，比如能抓请求，能清空storage,有timeMing等等,推荐去手机端体验地址

远程调试：chii具备用户访问网页,数据传输到开发chrome devtool的功能。比如项目集成了此工具，然后在定位疑难bug时，用户扫带放开chii的二维码，启动远程调试。

博文涉及的代码都在master分支里

---

反馈与建议

• 谭文斌
• 微信: