Webpack is a popular module bundler for front-end web development. One of its key features is the ability to split code into chunks, allowing for more efficient loading and caching of assets. The CommonChunkPlugin is a useful plugin that can help with this. In this tutorial, we will go over what the CommonChunkPlugin is, how it works, and how to use it in your own projects.
What is the CommonChunkPlugin?
The CommonChunkPlugin is a plugin for Webpack that allows you to extract common modules from multiple entry points into a separate chunk. This chunk can then be shared between entry points, reducing duplication and improving performance. The plugin was added in Webpack 1, and has been improved in subsequent versions, including Webpack 3.
How does the CommonChunkPlugin work?
The CommonChunkPlugin works by analyzing the modules used in each of your entry points, and identifying which ones are common across them. It then extracts these common modules into a separate chunk, which can be loaded once and shared between entry points. By default, the plugin will only look for modules that are used in at least two entry points, but you can configure this behavior using the minChunks option.
How to use the CommonChunkPlugin in your project
To use the CommonChunkPlugin, you will need to install it as a dependency:
npm install --save-dev webpack
Once you have installed Webpack, you can configure the CommonChunkPlugin in your Webpack configuration file. Here is an example configuration that demonstrates how to use the plugin:
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
---- ---------------
------- --------- -------------
--
------- -
----- --------- - --------
--------- ------------------------
--
-------- -
--- -------------------------------------
----- ---------
---------- ---------
--------- ------------------------
---
--
--In this example, we have two entry points: app and vendor. The app entry point is our main application code, while the vendor entry point includes common libraries like React and ReactDOM. We use the CommonChunkPlugin to extract these common libraries into a separate chunk named vendor, which will be loaded once and shared between entry points.
We set minChunks to Infinity to ensure that the plugin extracts all common modules, regardless of how many entry points they are used in. We also specify a custom filename for the extracted chunk using the filename option.
Conclusion
The CommonChunkPlugin is a powerful tool for optimizing your Webpack builds by extracting common modules into separate chunks. By following the steps outlined in this tutorial, you should be able to start using the plugin in your own projects.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33924