Why is WebPack slow to pack

This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

When webPack is first packaged, it takes a long time to prepare, such as loading plug-ins;

Solutions to webapck slow packaging:

Command line execution: webpack –watch

This causes WebPack to compile automatically, which is slow the first time it is packaged, but much faster later on. This principle will be explained below in how Webpack starts the Watch mode.
Configure externals to point the dependent third-party library to the global variable so that it is no longer packaged

The project relies on a number of third-party libraries, moudules, resulting in a lot of packaging with just a few code changes, which can be very slow each time. But we don’t need to repackage these third-party libraries, just our business code.
```
module.exports = {
    ...
    externals: {
        'react': 'window.React'
    }
    ...
}
Copy the code
```
React lets Webpack know that react doesn’t need to be packaged and points directly to window.react. But don’t forget to load the react.min.js variable to include the react variable globally.

Another way of writing:
```
externals: 
    {
      'antd':true,
      'react': 'React',
      'react-dom': 'ReactDOM'
    }
Copy the code
```
Do not load modules when require(” react “). Do not load modules when require(” react “).
```
<script src=``"node_modules/react/dist/react-with-addons.js"``></script>``<script src=``"node_modules/react-dom/dist/react-dom.min.js"``></script>``<script src=``"node_modules/antd/dist/antd.min.js"``></script>
Copy the code
```
React will not be packaged when require(” React “) is normally used in a project.

But it still has defects, due to the third-party libraries can rely on other libraries, when other libraries may lead to new add webpack repackaged third-party libraries, detailed we can see the brother’s article: blog.csdn.net/fengyinchao…
Add the shared modules to another file and use the CommonsChunkPlugin so that webPack-Watch doesn’t have to be re-typed into another file until it’s first packaged.

For details, see; www.bianchengquan.com/article/671…

How does Webpack start watch mode

Method 1: Run the cli`webpack --watch`

Executing the webapck –watch command means compiling once at a time.

Executing the webapck –watch command means executing multiple compilations at one time. As long as the relevant files are modified, the compilation will be triggered again, which is convenient for repeated configurations.

Method 2: Modify the configuration file`webpack.config.js`

In the configuration file webpack.config.js, enter the code watch:true

module.exports = {
    entry: {
        //...
    },
    output: {
        //...
    },
    watch: true,  
    watchOptions: {  
        ignored: /html/  
    },
}
Copy the code

When watch is set to true, the watch mode is automatically enabled during packaging. Ignored indicates that updates to a directory are ignored.

Reference:

Blog.csdn.net/fengyinchao…

Why is WebPack slow to pack