前端決策樹（轉）

時間 2019-11-11

標籤前端決策樹简体版

原文原文鏈接

前端決策樹

SEE Conf 演講的一部分。css

前端的發展真是太快了，子領域不少，而後每一個領域的方案也是層出不窮，好比 css-in-js 方案大大小小有 10 幾個，數據流方案有數十個。怎麼選？html

我以爲選方案就是作決策。大到框架是用 react 仍是 vue，小到壓縮是用 uglifyjs 仍是 terserjs，各類選擇，眼花繚亂。固然，這裏不會告訴你如何選，也不能代替你作決策，由於不少選擇其實沒有對錯，但我以爲沒有出如今這裏的均可以暫不考慮。前端

如下是我結合以前的經驗作的整理，主體是基於 React 社區。確定有考慮不周，歡迎 PR 補充。vue

框架
- 三大框架裏選哪一個？
  - react
    - next.js
    - after.js
    - umi
  - angular
  - vue
    - nuxt.js
- 考慮小程序？
  - 用原生、vue、仍是 react 語法？
  - 是否考慮代碼共用？
  - 小程序 -> vue|react 仍是 vue|react -> 小程序？
語言
- 引入強類型語言？
  - TypeScript
  - Flow
- 支持的話，後面全部的流程都須要額外考慮，好比 test、構建、數據流、三方庫支持等等
CSS
- 預編譯語言選哪一個？
  - less
  - sass
  - stylus
- 如何避免命名衝突？
  - css modules
    - 如何讓部分文件不使用 css modules？
  - bem
- 考慮 css-in-js？
  - styled components
  - emotion
  - radium
  - glamorous
- 主題、在線換膚？
數據流
- 數據流選哪一個？
  - redux
    - redux 反作用庫選哪一個？
      - redux-thunk
      - redux-saga
      - redux-observable
    - 要不要用 dva 或 rematch？
    - redux-persistent
  - mobx
    - 要不要上 mobx-state-tree?
  - rxjs
  - ngrx
  - vuex
  - 小而美的 unstated
  - 原生的 context + hooks
構建工具
- 構建工具選哪一個？
  - webpack
    - 怎麼配？最佳實踐是啥？
    - 如何讓使用者擴展 webpack 配置？
      - webpack-chain
      - webpack-merge
    - tree-shaking 是啥？怎麼開？
    - svg as component
    - 如何處理 HTML 文件？要不要用 html-webpack-plugin？
    - 如何提速？讓啓動和構建更快？
      - 基於路由或 entry 的按需編譯
      - hard-source-webpack-plugin，有用，但 bug 多
      - externals
      - dll
      - noParse，uglifyjs 的 exclude 配置等
    - 待補充，這裏內容太多了。。
  - rollup
  - parcel
  - system-js
- 壓縮
  - JavaScript 壓縮用啥？
    - uglifyjs2 - uglifyjs-webpack-plugin
    - uglify-es - terser-webpack-plugin
    - babel-preset-minify
  - CSS 壓縮用啥？
    - cssnano
      - cssnano-preset-default 裏哪些功能應該關掉？
    - clean-css
- babel
  - 如何選擇合適的 babel preset 和插件？
  - 如何選擇必要的語法特性？一些沒必要要的語法會引入額外的尺寸。
  - 如何選擇合適的補丁方案？
    - env + targets 配置
      - 用 entry 仍是 usage？
    - transform-runtime + runtime
  - node_modules 要不要編譯？
    - 不按規則轉成 es5 再發布的 npm 包怎麼處理？
      - es5-imcompatible-versions
  - 要不要啓用 babel-plugin-macros？
  - 如何寫插件實現定製語法修改？
- AST
  - 用哪套方案？
    - babel 全家桶，parser + traverse + types + template + generator
    - 老牌方案，esprima + escodegen + esquery
  - 要不要考慮封裝後的 jscodeshift？
- SourceMap
- PostCSS
  - 如何選擇合適的插件？
  - autoprefixer
    - 如何保證給 babel 補丁方案的瀏覽器配置是同一份？
  - 是否啓用高清方案？
組件工具
- 文檔工具用哪一個？
  - docz
  - storyboard
  - vuepress
- 同時打包出 cjs、esm、bundled esm、umd 等多種格式
- 用 rollup 仍是封裝過的 microbundle？
UI 庫
- 選哪一個？
  - ant-design
  - material-ui
  - ice
- 如何按需打包？
  - tree-shaking
  - babel-plugin-import
數據通信
- 選哪一個請求庫？
  - whatwg-fetch
  - axios
- 如何 mock 數據？
- 如何代理 API 到後端？
- 要不要上 graphql？
- websocket
包管理工具
- 包管理選哪一個？
  - npm
  - yarn
    - 要不要試着開啓 Plug'n'Play？
- 下載慢怎麼辦？
  - 自搭源服務
  - cnpm
- 有私有包的需求？
路由
- 路由選哪一個庫？
  - react-router 3 | 4
  - reach-router
  - router5
- 路由採用集中配置式？約定式？仍是分佈的組件式？
- 路由功能包含
  - 動態路由
  - 可選的動態路由
  - 嵌套路由
  - 基於路由的權限管理
  - 路由切換動效
  - 基於路由的麪包屑
  - 滾動條狀態
- history 用 hash 仍是 browser
  - browser 時需額外考慮部署問題
  - query 處理選 qs 仍是 query-string
測試
- 測試框架選哪套？
  - jest 全家桶
  - mocha + istanbul + chai + sinon
- ui 測試用哪套方案？
  - enzyme + jsdom
  - 官方的 react-test-rerender
  - kentcdodds 的 test-testing-library
- e2e 測試
  - puppeteer
  - cypress
- 測試錄製回放
- 數據模擬和準備
工程
- linters and formatters
  - eslint
    - 配置選哪套？
      - eslint-config-react-app
      - eslint-config-prettier
      - eslint-config-airbnb
      - 自建？
    - 要不要用 prettier？和 eslint 規則的衝突怎麼解決？
  - tslint
    - Typescript 校驗是用 eslint 仍是 tslint？
  - stylelint
- 目錄組織
ssr
- next.js
- after.js
- nuxt.js
靜態站點
- gatsby.js
性能優化
- 是否啓用 pwa？怎麼用？
  - 手寫 service-worker.js
  - workbox
  - 選擇哪一種緩存策略？
  - PRPL Pattern
- 基於路由的 code splitting
  - css 該拆仍是合？是否應該按需加載？
- 怎麼提取公共部分？
  - vendors 仍是 common？
  - minChunks 怎麼配？
  - 提一個仍是多個？
  - 項目裏有幾組不一樣的公共部分時怎麼處理？
  - dll 適合做爲公共提取方案嗎？
- prefetch
- critical css
- rawact（DOM 直出）
- 更多待補充...
部署
- 怎麼部署到非根目錄？
- 靜態文件須要部署到 cdn 時怎麼處理？
- 如何設置運行時的 publicPath？
- 如何針對 css 配置額外的 publicPath？