前端项目管理 工程化方案

Question

技术栈

目前团队中用的是 React 全家桶。具体说来是 React + React-router + Redux + Webpack + sass + postcss。做的是 Hybird SPA

html 管理

首屏需要一个载入中的界面，不能是一个白屏，图片是 base64 内嵌的，css 和 js 主要是用 html-webpack-plugin 进行管理，把 chunk 和一些配置项自动插入生成首页。

css 管理

css 经过 sass 和 postcss 生成后，再用 extract-text-webpack-plugin 提取到 head 标签内。要视乎项目的大小进行分割。

js管理

commonjs 配合 webpack 的 codesplit 进行管理，目前 webpack2 还在 beta，所以没用到项目中。在分割js代码时，尽量把首屏需要的内容先分割出来。如果首屏不需要ajax，就不引入ajax的组件。在首屏出现后再在后台载入。但是如果用户在此时就触发了 ajax，则利用 redux-thunk 本身的异步特点，先保证正在载入的脚本加载完，再进行ajax。

图片管理

利用url-loader,小于800字节的进行base64内嵌、压缩与sprite是必须的，压缩有webp和PNG两种结果

svg 图标：对于 UI 画的图标尽量用 SVG，配合svgo和 svg-sprite-loader，能够一片图片轻易生成不同的颜色、大小和旋转效果。能有基于语义的压缩(svgo)和基于编码的压缩(gzip)两重压缩，而且体积更小，适配性更强。

chunk 的分割

先载入一个小的代码，再载入几个差不多大小的js文件，充分利用域名连接数据限制

worker

webworker是异步的，而且不能操作dom，这个特性很适合做接口层的代码。而且我的项目在接口发送数据时有一部分需要加密，是计算密度较大的操作，把接口请求和报文加密解密的操作全交给worker去做，再利用worker-loader进行分割，可以让高版本的手机享受到多线程的优势。

优化插件

js 压缩是必须的

CommonsChunkPlugin 这个是一定要用上的插件，按照 React 的写法，因为每一个组件都需要 import react，所以不把公共代码提取出来，会导致React在每一个split的代码都有一份拷贝，所以一般做法是提取到 vendor 中。vue 在这方面就做得比较好。

webpack-bundle-analyzer 这是一个分析反馈的组件，帮你找到很占体积的那几个大头。反正我看了它分析的结果之后，在项目组中倡导去lodash和jQuery了，万一需要，也不要放在首屏的js中

资源的时效管理

加hash戳，修改文件时间，然后一整个打包发包。比如发布的文件有以下

1.aaa.js
2.bbb.js
3.ccc.css

经过一个迭代之后，变成

1.aaa.js
2.bb1.js
3.ccc.css

那么就把1和3的修改时间改过来，配合 Last-Modified 头，然后客户如果没清空缓存，就只更新2

http 缓存的选择

• gzip是必须的，目前只针对html,css,js用gzip
• 使用了Last-Modified而不是Etag，因为我也不清楚项目会不会放到一个集群中
• 没有使用expire，因为具体要到什么时间过期，不好交待给运维。Cache-Control，首页配置为no-cache,其他的max-age一个很大的数即可