Some suggestions on optimizing Webpack construction performance

as one of the most Popular front-end building tools, Webpack occupies an important position in the eco-circle of Vue/react and other frameworks. In the process of developing a modern WEB application, Webpack and our development process and release process are closely related, how to improve the performance of Webpack build packaging is also related to our development and release of the deployment of efficiency.

Here are a few suggestions for optimizing Webpack build performance:

First, select the appropriate devtool version

The Devtool configuration of the Webpack determines how the Sourcemap file is generated during the build process. In general, Eval has the highest performance, but the code that cannot be generated by the Sourcemap file is very different from the source code. The performance of the Source-map is poor, but the original version of the code can be generated. Cheap-module-eval-source-map is the best choice for most development scenarios.

Is the comparison of each devtool configuration (the more the + number, the faster the speed,-the more the number, the slower the Representative, O represents the medium speed)

Note *: In the production configuration, if you need to generate a Sourcemap file for exception analysis, you should use Hidden-source-map or Nosources-source-map, Source-map and other configurations. And do not put the Sourcemap file in the deployment directory.

Second, Build Cache

Webpack and some plugin/loader have the Cache option. Turn on the Cache option, which has the advantage of improving build performance.

For example: When you use Babel-loader, the cachedirectory option is turned on, which will significantly increase the build speed.

Module: {rules: [{test:/\.js$/, use: [' babel-loader?cachedirectory '], Include:path.join (__dirn Ame, ' app '}]}

third, reduce the code volume

• Use Commonschunksplugin to extract common modules between multiple chunk to reduce overall code volume

• Transfer part of the dependency to the CDN to avoid being processed by Webpack during each compilation

• For class libraries that support local ingestion, use local ingestion in the development process to avoid the introduction of useless files

For example, Lodash supports the partial introduction of:

Import IsArray from ' Lodash/isarray ';

Reference: [Don ' t import whole Lodash] (https://github.com/lodash/lodash/issues/3450)

When this optimization method is carried out, the chunk volume and content can be analyzed with visual tools. Facilitates further adjustment of the Webpack configuration. There are two main ways of doing this:

1. Use the Webpack Profile command to generate the JSON file and upload the JSON to the appropriate online website for visual analysis.

"' Bashwebpack--profile--json > Stat.json '

Use Webpack-visualizer for analysis:

2. Use a third-party plugin, perform volume analysis during compilation, and output in a graphical manner:

Recommended use of Webpack-bundle-analyzer:

Iv. Reduce the scope of the directory search

By specifying the Exclude and incude options when using loader, you can reduce the range of directories loader traverse, thus speeding up the Webpack compilation speed.

For example, specify Babel-loader to process only business code:

{test:/\.js$/, use: [' Babel-loader '], Include:path.join (__dirname, ' app ')}

v. Reduction of search Paths

Resolve.alias can configure aliases for Webpack module parsing, and for deep parsing paths, you can configure alias for them. You can increase the Webpack build speed.

Alias: {Utilities:path.resolve (__dirname, ' src/utilities/'), Templates:path.resolve (__dirname, ' src/templates/')}

Vi. using Dllplugin/dllreferenceplugin for pre-construction

Webpack's Dllplugin and Dllreferenceplugin are introduced in the new version of the Plugin, the idea is to change the frequency of a smaller third-party library, such as relying on a separate package build, when packaging the entire project, if resolved to the DLL The form of packaging dependencies will be skipped during the normal packaging process, and the introduction of these dependencies into the Dll module. This greatly increases the speed at which the business code is packaged.

1. Create a separate webpack configuration file, such as Webpack.dll.config.js

2. In this configuration file, use Webpack dllplugin to generate Manifest.json files and Dll module files. It is also possible to introduce processing such as Uglifyplugin to third-party dependency compression.

import path from  ' path ';import pkg from  './package.json '; import webpack  from  ' Webpack '; Var vendorpackages = object.keys (pkg.dependencies); const config  = {entry: {     vendor: vendorPackages      },output: {     filename:  ' dll.[ Name].js ',      path: path.resolve (__dirname,  ' Build ',  ' dll '),      library:  ' [name] '       },plugins: [      new webpack. Dllplugin ({           context: __dirname,            name:  "[Name]_[hash]",            path: path.join (__dirname,  "Manifest.json"),      }), &nbsP;    new webpack.optimize.uglifyjsplugin ({            sourceMap: true,            minimize: true,           cache: true,            parallel: true        }),     ]}   export default config;

3. In the normal Webpack configuration file, use Webpack Dllreferenceplugin to parse the Manifest.json generated in the previous step

New Webpack. Dllreferenceplugin ({context:path.join (__dirname), Manifest:require ('./manifest.json ')})

In the case where the dependencies contained in the DLL are not changed in the specific use, a single webpack--config webpack.dll.config.js can be executed first. You can then perform the build process of the business code multiple times. By stripping out third-party dependencies, the business code is built much faster.

Here are some articles about Webpack build performance:

1): Improve performance with Dllplugin

2): Use of Prefetchplugin

3): Webpack packaging analysis and performance optimization

4): Webpack Use optimization

Reproduced please specify from: Grape City control

about Grape City

Founded in 1980, Grape City is the world's largest control provider, providing services to more than 75% of Fortune 500 companies worldwide, with a leading provider of enterprise application customization tools, enterprise reporting and business intelligence solutions. In 1988, Grape City set up a research and development center in China, in the development of global products, constantly adapt to the local needs of the Chinese market, and for software enterprises and various industries of information technology to provide excellent software tools and consulting services.

Some suggestions on optimizing Webpack construction performance