前端工程精讲

将军肚
245 阅读5分钟

## 一 开发效率

1.1Mock工具

  • Mock.js
    • Ajax请求拦截
      • Mock.mock方法支持传入Ajax请求的url和type
      • Mock.setup方法设置拦截Ajax请求后的响应时间
    • 数据验证
      • Mock.valid方法验证指定数据和数据模块是否匹配
      • 用于验证后端API接口的返回值与对应Mock数据的规则描述是否冲突
    • 模块导出
      • Mock.toJSONSchema
        用户将数据模块导入到支持JSON Schema格式的工具中
  • Faker.js
    • 国际化数据推荐
    • 并非最佳选择
        1. 数据模块和TS类型需要通过人工来保持一致，缺乏自动检验功能
        1. 仍然需要后端编写完整的接口文档后才能开始编写数据生成逻辑
        1. 本地模拟数据规则本质上和接口文档脱离

1.2编码效率

  • 预处理语言
    • SCSS
      • 编译安装包
        • 基于LibSass的node-sass
        • 基于dart-sass的Sass (推荐)
  • 代码生成
    • Snippet
    • Emmet

1.3云开发模式

  • 将开发环境托管，由远程服务器变更为云服务
    个人电脑通过IDE或云服务提供浏览器界面访问云端工作区进行开发

  • 1.提升开发环境准备效率
    2.简化使用流程
    3.提升团队协作效率
    4.有利于资源利用率

  • 云开发产品

    • VS Codespace -- 微软 -- VS Code -- Web/VS/VSC
    • CloudIDE -- 阿里云 -- KAITIAN IDE -- web
    • Cloud Studio -- 腾讯云 -- VS Code -- web
    • Cloud9 -- AWS -- Cloud9 -- web

  • 技术要素

    • webIDE
    • 容器化
    • 对接其他云服务

1.4低代码和无代码开发

  • 基于编写JSON的开发方式
  • 基于可视化操作平台的开发方式
  • 商用产品： Kony / OutSystems / Mendix / Appian / iVX(国产)
    开源类产品：阿里飞冰 / 百度 Amis / 贝壳河图 / Vvvebjs / react-visual-editor

二 构建效率

2.1webpack构建流程

  • Compiler.js基本流程
    • newCompilationParams
      • 创建MormalModule和ContextModule的工厂实例，用于创建后续模块实例
    • newCompilation
      • 创建编译过程Compilation实例，传入上一步的两个工厂实例作为参数
    • compiler.hooks.make.callAsync
      • 触发make的hook,执行所有监听make的插件
    • compilation.finish
      • 编译过程实例的finish方法，触发相应的hook并报告构建模块的错误和警告
    • compliation.seal
      • 编译过程的seal方法
    • emitAssets
      • 调用compilation.getAssets()
        将产物内容写入输出文件中
    • emitRecords
      • 对应第一步的readRecords，用于写入构建记录，在未设置recordsPath时直接返回
  • Compilation.js基本流程

    • addEntry
      从Entry开始递归添加和构建模块

    • seal
      冻结模块，进行一系列优化以及触发各优化阶段的Hooks

    • Hooks

      • 初始化阶段
        • environment / afterEnvironment
          • 在创建完compiler实例且执行了配置内定义的插件的apply方法后触发
        • entryOption / afterPlugins / afterResolvers
          • 在WebpackOptionsApply.js中，这3个Hooks分别在执行EntryOptions插件和其他Webpack内置插件，以及解析了resolver配置后触发
      • 构建过程阶段
        • normalModuleFactory / contextModuleFactory
          • 在两类模块共创创建后触发
        • beforeRun / run / watchRun / beforeCompile / compile / thisCompilation / compilation / make / afterCompile
          • 在运行构建过程中触发
      • 产物生成阶段
        • shouldEmit / emit / assetEmitted / afterEmit
          • 在两类模块工厂创建后触发
        • failed / done
          • 在达到最终结果状态时触发

    • 手写统计生命周期分析插件

      •   class SamplePlugin {  
    apply(compiler){  
      var start = Date.now()  
      var statsHooks = [‘environment’, ‘entryOption’, ‘afterPlugins’, ‘compile’]  
      var statsAsyncHooks = [  
        ‘beforeRun’,  
        ‘beforeCompile’,  
        ‘make’,  
        ‘afterCompile’,  
        ‘emit’,  
        ‘done’  
      ]  
     
      statsHooks.forEach(hookName => {  
        compiler.hooks[hookName].tap(’Sample Plugin’, ()=>{  
          console.log(`Compiler Hook ${hookName}, Time: ${Date.now() - start}ms`)  
        })  
      })  
    }  
  }

2.2webpack编译阶段提速

  • Compiler 和 Compilation 各生命周期最耗时的阶段
    • 对于Compiler 为 make阶段
    • 对于 Compilation 编译模块和后续优化的生成产物并压缩代码的过程都比较耗时
  • 编译模块效率提升

    • 准备基于时间的分析工具
      speed-measure-webpack-plugin

    • 准备基于产物的分析工具
      webpack-bundle-anzlyzer

    • 提升这一阶段大致分为三个方向

      • 减少执行编译的模块

        • IgnorePlugin
          构建时排除不需要的模块

          •   new webpack.IgnorePlugin({  
    resourceRegExp: /\^\.\/locale$/,  
    contextRegExp: /moment$/,  
  })
      • 提升单个模块的构建速度
      • 并行构建以提升总体效率
        • HappyPack工具
        • thread-loader工具

2.3webpack打包阶段提效

  • JS压缩 - Terser
  • CSS压缩
    • OptimizeCSSAssetsPlugin （Create-React-APP中使用）
    • OptimizeCSSNanoPlugin (VUE-CLI中使用)
    • CSSMinimizerWebpackPlugin （2020年webpack社区发布 支持缓存多进程）
  • 提升工作效率为目标的方案
    • Split Chunks 分包
    • Tree Shaking
      • 引入的模块需要ES6类型，CommonJS不支持
      • 引入方式不能使用default
      • 引入三方包情况下，对应的package.json需要设置sideEffects:false来表明无副作用
      • 需注意Babel7前后不同版本对模块化的预设不同
  • 无包构建，基于浏览器的ES6加载

    • index.html

      <script type=“module” src=“./modules/foo.js”></script>

      foo.js

      import {bar} from ‘./bar.js’  
import {appendHTML} from ‘./common.js’  
  
import(‘https://cdn.jsdelivr.net/npm/lodash-es@4.17.15/slice.js’).then(module=>{  
 //...  
})
      • Edge 16+
        • Firefox 60+
        • Chrome 61+
        • Safari 11+
        • Android Browser 81+
        • Chrome for Android 85+
      1. 入口模块文件需带上 type=“module”
      2. 带有type=“module”在浏览器中通过 defer方式异步执行，即异步加载不阻塞html 按html顺次执行
      3. 带有type=“module” 且有async 属性，在浏览器中通过 async方式异步执行 即异步加载不阻塞html 按模块依赖顺次执行
      4. 即使多次加载也只执行一次

    • 工具

      • Vite
        • vue作者推出
      • Snowpack

    • 优点

        • 初次构建启动快
          • 按需编译
          • 增量构建速度快

    • 缺点

        • 浏览器网络请求数量剧增 － （HTTP2解决）
          • 浏览器兼容性

三 部署效率

流程

  • 1 获取代码
    2 安装依赖
    3 源码构建
    4 产物打包
    5 投送代码
    6 重启服务

流程安全风险

    • 同一个项目，不同开发人员的本地环境差异
      • 由于NodeJS语义化版本在安装时自动升级问题，不同开发人员本地的node_modules中的依赖包版本也可能差异
      • 开发人员的本地环境和部署代码的目标服务器之间也可能存在差异
  • 使用远程统一的部署系统，避免上述问题

部署系统

  • Jenkins
      • 完全免费开源产品
        • 缺少特定语言环境工作流，使用成功相对高，服务器需要独立部署和运维
  • CircleCI
      • 基于云端，本地化收费
  • Github Actions
      • 基于云端
        • 使用成功最低
  • Gitlab CI
      • 基于云端
        • 企业中受 欢迎
        • 内置CI/CD
avatar
文章
阅读
粉丝