webpack build speed optimization - optimizing the company recorded a build projects (incomplete record) to read reference purposes only

Packing AST-speed conversion> through the tree -> converted back to the code (WebPACK reference concrete syntax configuration, but here some personal recording process, does not include a detailed procedure)
1, cache-Loader Cache
2, polynuclear Threads happypack
. 3, pulled DllPlugin, externals
. 4, split Docker

Optimization projects: measuring the plug speed-measure-webpack-plugin

usage:

 

 

 

 

 

 

Before optimization: You can find our project is quite brutal! ! After the open AOT (Angular5 project), construction of the line reached 41 minutes!

Measurement problems arise: raw-loader, css-loader , sass-loader, file-loader, to-string-loader loader newspaper and other red priority.
Since the raw-loader, file-loader using the cache-loader problems, temporarily handle both loader cache

 

 

 

1, open relatively time-consuming, large overhead loader cache processing, here uses webpack of cache-loader.

 

 

2, the use of multi-threading overhead happypack open a larger module for translation. And UglifyJsPlugin turned parallel cache and improve compression efficiency.

id is the corresponding loader, said correspondence happypack / loader? id = xxx can, if you want to open simultaneously and cache-loader happypack, can be added prior loaders to, such as [ 'cache-loader', ... loaders]

 

 

 

3. Use the dynamic link library DllPlugin the large overhead pulled out of third-party libraries, and you can use DllReferencePlugin introduced in webpack.prod.config.js.

ps: I do not know why life and death reported here can not resolve .... modules error, therefore no solution to this problem. But the idea is like this. So next time try.

Reference: https://juejin.im/post/5bceb2e8e51d457ac752f878 

 

The final result! ! develop, test environment because AOT mode is not turned on, if not submitted functionality iterative codes, lifted by the usual seven minutes to 2 minutes and 50 seconds! !

And unfortunately, because the frame using a Angular5 version, no lvy, Angular next-generation renderer v6, because packaged speeds of up to 41 minutes! After completion of the optimization arrived about 30 minutes. Visible do these effects is very obvious.

We hope to be able to further optimize!

 

Guess you like

Origin www.cnblogs.com/chenfengami/p/12623876.html