update tree shaking guide for webpack 4 #1865

quantizor · 2018-02-28T07:20:10Z

updated the treeshaking documentation for webpack 4

quantizor · 2018-02-28T07:23:12Z

I think uglify isn't technically needed anymore to do tree shaking right? But seems like a good recommendation to enable it anyway.

jeremenichelli · 2018-02-28T19:27:58Z

Thanks @probablyup, can you change the base from masterto next we are mergin everything there first. Thanks!

quantizor · 2018-02-28T19:29:05Z

@jeremenichelli done

quantizor · 2018-02-28T19:29:48Z

src/content/guides/getting-started.md

@@ -144,7 +144,7 @@ In this setup, `index.js` explicitly requires `lodash` to be present, and binds
 With that said, let's run `npx webpack` with our script as the [entry point](/concepts/entry-points) and `bundle.js` as the [output](/concepts/output). The `npx` command, which ships with Node 8.2 or higher, runs the webpack binary (`./node_modules/.bin/webpack`) of the webpack package we installed in the beginning:

 ``` bash
-npx webpack src/index.js dist/bundle.js
+npx webpack src/index.js --output dist/bundle.js


not sure where this change came from...

From the next rebase maybe.

jeremenichelli · 2018-02-28T19:30:16Z

src/content/guides/tree-shaking.md

-## Minify the Output
+## Mark the file as side-effect-free
+
+In a 100% ESM module world, identifying side effects is straightforward. However, we don't live in that reality just yet, so it's necessary to provide hints to webpack's compiler on the "pureness" of your code.


Can you rephrase we don't live in that reality just yet, so to we aren't there just yet, in the mean time

jeremenichelli · 2018-02-28T19:32:23Z

src/content/guides/tree-shaking.md


-Let's start by installing it:
+T> A "side effect" is defined as code that performs a special behavior when imported, other than simply exposing one or more exports. For instance: a polyfill which adjusts the global scope but does not provide an export or has one that you are not using in your codebase.


Can we rephrase this as:

A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports like a polyfill, which might affect the global scope and might not provide an export or has one that you are not using in your codebase.

jeremenichelli · 2018-02-28T19:34:43Z

src/content/guides/tree-shaking.md

+## Minify the Output
+
+So we've cued up our "dead code" to be dropped by using the `import` and `export` syntax, but we still need to drop it from the bundle. To do that, we'll use the `-p` (production) webpack compilation flag to enable the uglifyjs minification plugin.
+


@TheLarkInn @sokra is the -p flag still recommended in webpack 4? Or should we clarify that is for versions older than v4?

jeremenichelli · 2018-02-28T19:35:37Z

src/content/guides/tree-shaking.md

 ## Conclusion

 So, what we've learned is that in order to take advantage of _tree shaking_, you must...

 - Use ES2015 module syntax (i.e. `import` and `export`).
+- Add a "sideEffects" entry to your project's `package.json` file.


This would be if the code is not affecting outside scope, not always so we should add it to here.

Actually no, you should always add a sideEffects entry or treeshaking won't work.

Well, but if your librari does produce side effects you shouldn't, right? I don't want to give that message to package owners.

Perhaps, but in that case set it to true, or provide an array with the specific files that include side effects as described in the guide.

It's better to explicitly have the sideEffects known to webpack than to try and infer it.

It is required?

Maybe is redundant since you already define what sideEffects means. I'm OK with it. Sorry for the noise.

jeremenichelli · 2018-02-28T20:11:36Z

There are some rephrasing that I think is necessary, the rest looks good @probablyup

quantizor · 2018-03-01T02:00:53Z

@jeremenichelli updated

edmorley · 2018-03-12T15:52:10Z

Do you think it's worth also linking to the debugging optimization bailouts section from this page?

edmorley · 2018-03-12T17:37:51Z

I think this should also include:

the new sideEffects selectors added in Add support for more complex sideEffects selectors webpack#6536
setting sideEffects via module rules (ie allowing downstream apps to override the package.json entry) - allow to set sideEffects from rules webpack#6129

quantizor · 2018-03-15T06:01:58Z

@edmorley updated

quantizor · 2018-03-15T06:09:40Z

@jeremenichelli could this be merged? I think many people would find it helpful

edmorley · 2018-03-15T12:35:05Z

@probablyup this is great - thank you for the changes :-)

montogeek added Guides New Release Clarification labels Feb 28, 2018

quantizor changed the base branch from master to next February 28, 2018 19:28

quantizor commented Feb 28, 2018

View reviewed changes

jeremenichelli reviewed Feb 28, 2018

View reviewed changes

update tree shaking guide for webpack 4

6194853

quantizor force-pushed the update-se-docs branch from cdae9d0 to 6194853 Compare March 1, 2018 02:00

jeremenichelli approved these changes Mar 1, 2018

View reviewed changes

quantizor added 2 commits March 15, 2018 01:58

update related links to be relevant for webpack 4

0e545a1

add note about side effects and non-JS files

9ad350d

quantizor force-pushed the update-se-docs branch from 00a5bd2 to 9ad350d Compare March 15, 2018 06:01

add some more advanced usage notes

2f19976

dhruvdutt approved these changes Mar 15, 2018

View reviewed changes

jeremenichelli merged commit c1318e1 into webpack:next Mar 15, 2018

edmorley mentioned this pull request Mar 15, 2018

optimization.sideEffects = true causes issues with local CSS webpack/webpack#6741

Closed

quantizor deleted the update-se-docs branch March 16, 2018 05:11


		Let's start by installing it:
		T> A "side effect" is defined as code that performs a special behavior when imported, other than simply exposing one or more exports. For instance: a polyfill which adjusts the global scope but does not provide an export or has one that you are not using in your codebase.

		## Minify the Output

		So we've cued up our "dead code" to be dropped by using the `import` and `export` syntax, but we still need to drop it from the bundle. To do that, we'll use the `-p` (production) webpack compilation flag to enable the uglifyjs minification plugin.

Uh oh!

update tree shaking guide for webpack 4 #1865

update tree shaking guide for webpack 4 #1865

Uh oh!

Conversation

quantizor commented Feb 28, 2018

Uh oh!

quantizor commented Feb 28, 2018

Uh oh!

jeremenichelli commented Feb 28, 2018

Uh oh!

quantizor commented Feb 28, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeremenichelli Feb 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeremenichelli commented Feb 28, 2018

Uh oh!

quantizor commented Mar 1, 2018

Uh oh!

edmorley commented Mar 12, 2018

Uh oh!

edmorley commented Mar 12, 2018

Uh oh!

quantizor commented Mar 15, 2018

Uh oh!

quantizor commented Mar 15, 2018

Uh oh!

edmorley commented Mar 15, 2018

Uh oh!

Uh oh!

jeremenichelli Feb 28, 2018 •

edited

Loading