前端决策树 （转）

前端决策树

 SEE Conf 演讲的一部分。

前端的发展真是太快了，子领域很多，然后每个领域的方案也是层出不穷，比如 css-in-js 方案大大小小有 10 几个，数据流方案有数十个。怎么选？

我觉得选方案就是做决策。大到框架是用 react 还是 vue，小到压缩是用 uglifyjs 还是 terserjs，各种选择，眼花缭乱。当然，这里不会告诉你如何选，也不能代替你做决策，因为很多选择其实没有对错，但我觉得没有出现在这里的都可以暂不考虑。

以下是我结合之前的经验做的整理，主体是基于 React 社区。肯定有考虑不周，欢迎 PR 补充。

  • 框架
    • 三大框架里选哪个？
      • 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？

如果不想做选择，大家可以考虑封装好的框架，比如 next.js、gatsby 或者 umi 。

https://github.com/sorrycc/f2e-decision-tree

posted @ 2019-06-11 18:01  little_ab  阅读(1387)  评论(0)  编辑  收藏  举报