developit / developit/proptypes
Removing dead code in prod builds
- 主要語言
- JavaScript
- 星號
- 60
- 分支
- 11
- PR 合併指標
- 30 天內沒有已合併 PR
描述
I've been looking a little into reducing the weight of my production `libs.js` and noticed that this `proptypes` lib was adding around ~4kb after minification, I know not much but hey every bit counts, especially when proptypes isn't used in prod builds.
Looking at `preact-compat` where these prop types get brought in I see you formulate a `DEV` var based on `process.env.NODE_ENV` [here](https://github.com/developit/preact-compat/blob/master/src/index.js#L31), that's then used to enable/disable PropType usage.
Unfortunately uglify.js with webpack DefinePlugin doesn't strip out the proptypes code based on this. Perhaps with tree shaking it might but that's not [100% working yet](https://github.com/webpack/webpack/issues/2867) so I've not spent too much time there. Also I think you need to use the explicit conditional e.g. `if (process.env.NODE_ENV === 'production')` for uglify stripping to work (see below).
Looking at [React code](https://github.com/facebook/react/blob/master/src/isomorphic/classic/types/ReactPropTypes.js#L73) they stub out all the prop type validators and use these when `process.env.NODE_ENV` is `production'`. They actually have a babel processor which replaces `__DEV__` with `process.env.NODE_ENV !== 'production`.
So first pass I tried formulating the `DEV` var like you did in preact compat and applying it. That didn't work though. For uglify to strip the code you seem to have to use the explicit check in the conditional, and on it's own.
```
if (process.env.NODE_ENV !== 'production'`) {
} else {
}
```
which webpack will replace with the following in prod builds
if (false) { ...
https://github.com/developit/proptypes/compare/master...mikestead:feature/prod-noop?expand=1#diff-1fdf421c05c1140f6d71444ea2b27638R117
So the above works and my libs shrink
libs.c1c2e08.js 131 kB 1, 2 [emitted] libs // before
libs.a0e99bd.js 127 kB 1, 2 [emitted] libs // after
My problem is how to polyfill `process.env` IN the proptypes `index.js`. I tried something like the following
```
if (typeof process === 'undefined') {
var process = {};
}
if (!process.env) {
process.env = {};
}
```
but that interferes with the uglify stripping too. I think it would need polyfilled outside of this module for it to work?
Not super high priority, just hoped there may be a quick win.
貢獻指南
這個儲存庫沒有索引到貢獻指南
研究方向
從 proptypes index.js 開始,將其環境檢查與所參照的 preact-compat src/index.js 以及連結的 prod-noop diff 進行比較。執行 webpack/Uglify 生產建置,然後確認 PropTypes 程式碼已從 bundle 中移除,同時開發環境中的驗證行為仍然可用。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript, webpack
- 領域
- build-system, performance
- Issue 類型
- 功能
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 活躍度
- 停滯
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100