Read on Twitter
If you ever looked inside a non-minified bundle, you might’ve seen a lot of automatically generated comments that look like this:
/*#__PURE__*/
Even wondered what they are for? Here’s a short thread
/*#__PURE__*/
Even wondered what they are for? Here’s a short thread
1) In 2016, folks noticed that when you transpile a JS class with Babel, the class isn’t removed during tree-shaking. Even if it’s not used anywhere.
React was heavily relying on classes back then, so this was a pretty huge deal for React apps.
https://github.com/mishoo/UglifyJS/issues/1261
React was heavily relying on classes back then, so this was a pretty huge deal for React apps.
https://github.com/mishoo/UglifyJS/issues/1261
2) Why was this happening?
Back then, classes were just a syntactic sugar around functions. So, to transpile a class, Babel was converting it into a function – and wrapping that function into an IIFE (immediately invoked function expression):
Back then, classes were just a syntactic sugar around functions. So, to transpile a class, Babel was converting it into a function – and wrapping that function into an IIFE (immediately invoked function expression):
3) Well, a problem with an IIFE is that UglifyJS (which did tree shaking in webpack back then) doesn’t know whether it’s safe to remove it.
An IIFE may simply create a class and do nothing else, like above. But it also may send a request to the server. UglifyJS doesn’t know!
An IIFE may simply create a class and do nothing else, like above. But it also may send a request to the server. UglifyJS doesn’t know!
4) To solve this, /*#__PURE__*/ was born.
Babel started to add /*#__PURE__*/ comments in front of IIFEs it generates (as it knows they don’t have any side effects).
And UglifyJS started to recognize these comments – and dropping pure function calls if their result isn’t used.
Babel started to add /*#__PURE__*/ comments in front of IIFEs it generates (as it knows they don’t have any side effects).
And UglifyJS started to recognize these comments – and dropping pure function calls if their result isn’t used.
5) Fast forward to 2021:
— Terser replaced UglifyJS in webpack (and is still responsible for most of tree shaking)
— A lot of other tools adopted /*#__PURE__*/ comments (eg babel-preset-react – for React.createElement – or babel-plugin-styled-components – for styled.whatever)
— Terser replaced UglifyJS in webpack (and is still responsible for most of tree shaking)
— A lot of other tools adopted /*#__PURE__*/ comments (eg babel-preset-react – for React.createElement – or babel-plugin-styled-components – for styled.whatever)
— /*#__PURE__*/ annotations were documented on the Terser website, along with a couple others: https://terser.org/docs/api-reference.html#annotations
— This topic remains my favorite conference trivia (because /*#__PURE__*/ plays a huge role today, and I rarely meet people who know about it!)
— This topic remains my favorite conference trivia (because /*#__PURE__*/ plays a huge role today, and I rarely meet people who know about it!)
