developit / developit/proptypes

Removing dead code in prod builds

Đang mở
#4 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
60
Fork
11
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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.

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Hướng nghiên cứu

Start with the proptypes index.js and compare its environment checks with the referenced preact-compat src/index.js and the linked prod-noop diff. Run the production webpack/Uglify build, then verify that PropTypes code is removed from the bundle while development validation behavior remains available.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, webpack
Lĩnh vực
build-system, performance
Loại issue
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.