webpack optimization strategy

When we build a single-page application (vue, React) or encapsulate a plug-in, there is a high chance that we will use webpack, a JavaScript packaging tool.
But as the project code increases, some simple configurations of webpack will expose various Disadvantages (long packaging time, large code).
The following is a summary of solving problems based on the process of self-development and learning webpack.

Long packaging time

DllPlugin

Many Everyone knows that webpack.optimize.CommonsChunkPluginThis plug-in is used to extract public libraries, but this plug-in cannot solve the problem of repeated packaging of public libraries.
However,DllPluginThis plug-in can solve the problem.
This plug-in will package the public library first.
It has its own independent webpack configuration file, and the entrance to the configuration file is the public library that needs to be packaged Library.
When it is packaged, a public js package and manifest.json.
manifest.json# will be generated. ## is used to map the main configuration file DLLReferencePlugin to related dependencies

devtool cheap-module-eval-source-map

When we use webpack to package the code, it is compiled, so it becomes difficult to debug.

So webpack gives the devtool API and will find the correct location of the error through Source Map.
Select devtool
cheap-module-eval-source-mapThe reason is that each module uses eval() to greatly improve the efficiency of continuous construction and does not generate column mapping to save construction time (the browser engine will automatically give column information).

Performance optimization

Separation and compression of styles

Use

extract-text-webpack-plugin The styles in each script are extracted. If you set
allChunks: true, the extracted styles will be merged into one file.Use
optimize-css-assets-webpack-pluginCompress styles.

Compression of scripts

Use

uglifyjs-webpack-plugin Compress the script.

js performance optimization

Each module of webpack will be placed in a closure function.

Use
webpack.optimize. ModuleConcatenationPlugin will put the associated module into a closure.Thus reducing the number of closures.

Extract public code

Use

DllPlugin or webpack.optimize.CommonsChunkPlugin will extract the public code and package it into other files. Avoid repeated packaging, thereby reducing the number of packages Size.

Server pre-compression

When the service turns on pre-compression.

will first obtain the file name ending with
.gz file, this file is a compressed file and will be small in size. Using
CompressionWebpackPlugin will generate the corresponding compressed file.

Related recommendations:

react, webpack, cross-domain proxy multi-page

Vue+webpack basic configuration sharing

Network optimization of webpack projects Code sharing

The above is the detailed content of webpack optimization strategy. For more information, please follow other related articles on the PHP Chinese website!