You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/plugins/module-concatenation-plugin.mdx
+26-24
Original file line number
Diff line number
Diff line change
@@ -5,42 +5,44 @@ contributors:
5
5
- skipjack
6
6
- TheLarkInn
7
7
- byzyk
8
+
translators:
9
+
- Yucohny
8
10
---
9
11
10
-
In the past, one of webpack’s trade-offs when bundling was that each module in your bundle would be wrapped in individual function closures. These wrapper functions made it slower for your JavaScript to execute in the browser. In comparison, tools like Closure Compiler and RollupJS ‘hoist’ or concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser.
This plugin will enable the same concatenation behavior in webpack. By default this plugin is already enabled in [production `mode`](/configuration/mode/#mode-production)and disabled otherwise. If you need to override the production `mode` optimization, set the [`optimization.concatenateModules`option](/configuration/optimization/#optimizationconcatenatemodules)to`false`. To enable concatenation behavior in other modes, you can add `ModuleConcatenationPlugin`manually or use the `optimization.concatenateModules`option:
> This concatenation behavior is called “scope hoisting.”
20
+
> 这种合并行为被称为“作用域提升”。
19
21
>
20
-
> Scope hoisting is specifically a feature made possible by ECMAScript Module syntax. Because of this webpack may fallback to normal bundling based on what kind of modules you are using, and [other conditions](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5).
W> Keep in mind that this plugin will only be applied to [ES6 modules](/api/module-methods/#es6-recommended) processed directly by webpack. When using a transpiler, you'll need to disable module processing (e.g. the [`modules`](https://babeljs.io/docs/en/babel-preset-env#modules)option in Babel).
As the article explains, webpack attempts to achieve partial scope hoisting. It will merge modules into a single scope but cannot do so in every case. If webpack cannot merge a module, the two alternatives are Prevent and Root. Prevent means the module must be in its own scope. Root means a new module group will be created. The following conditions determine the outcome:
When using the webpack CLI, the `--stats-optimization-bailout`flag will display bailout reasons. When using the webpack config, add the following to the `stats`object:
0 commit comments