Based on Commonschunkplugin,webpack packaging optimization

The previous period of time has been based on the webpack of the front-end resource pack to thin body. Code separation based on routing in the Project, http://www.cnblogs.com/legu/p/7251562.html. But the packaging of the files is still very large, especially through the Commonschunkplugin Async:true packaged chunk public package is not controllable. Today through the Commonschunkplugin plug-in understanding, to optimize the problem

The problem is described in more detail, our packaging is based on router chunk segmentation, such as router 10, Router1,router2 used Echart, so echart packaged in the public file async. But if the user passes the link,

The first direct access to the ROUTER3, this will first load the public file async, but the Echart code is actually superfluous, affecting the router3 of the show.

At first encountered this problem, did not think of too good method, let Echart based on chunk on-demand packaging ~ ~ Really no way, finally can only from Commonschunkplugin plug-in source code, see what inspiration.

　　

1 apply (compiler) {2Compiler.plugin ("This-compilation", (Compilation) = {3Compilation.plugin (["Optimize-chunks", "Optimize-extracted-chunks"], (chunks) = {4                 /**5 * According to Chunknames[options.name, Options.names], from chunks to filter out targetchunks, no then use Compilation.addchunk new6 * If children | | async, return targetchunks = Chunks7                  */8Const TARGETCHUNKS = This. Gettargetchunks (chunks, compilation, This. Chunknames, This. Children, This. async);9Targetchunks.foreach (targetchunk, idx) = {Ten                     /** One * According to Selectedchunks "Options.chunks", from chunks to filter out affectedchunks A * async | | children, return affectedchunks = targetchunk.chunks, if children = true, deep traversal -                      */ -Const AFFECTEDCHUNKS = This. Getaffectedchunks (compilation, chunks, Targetchunk, targetchunks, IDX, This. Selectedchunks, This. Async, This. Children, This. Deepchildren);  the Let asyncchunk; -                     if( This. Async) { -                         //if async==string, make name filter -Asyncchunk = Affectedchunks.filter (c = = C.name = = = This. async) [0]; +                         if(!asyncchunk) { -                             /** + * Create a new chunk based on async, and targetchunk binding relationship A * Asyncchunk.addparent (Targetchunk); Targetchunk.addchunk (Asyncchunk);  at                              */ -Asyncchunk = This. Createasyncchunk ( - compilation, -Targetchunks.length <= 1 | |typeof  This. Async!== "string"? This. Async: -Targetchunk.name? `${ This. async}-${targetchunk.name} ': -                                 true, in Targetchunk -                             ); to                         } +Targetchunk =Asyncchunk; -                     } the                     //iterates through the modules of the Affectedchunks and returns the public modules collection that meets the criteria according to the Minchunks setting *Const Extractablemodules = This. Getextractablemodules ( This. Minchunks, Affectedchunks, targetchunk); $                     if( This. minSize) {//minsize restriction LogicPanax NotoginsengConst MODULESSIZE = This. Calculatemodulessize (extractablemodules); -                         if(Modulessize < This. MinSize) the                             return; +                     } A                     //Affectedchunks removes the modules relationship in the Extractablemodules, returning only the chunks collection that exists in the public modules (Removechunk returns True) theConst Chunkswithextractedmodules = This. Extractmodulesandreturnaffectedchunks (Extractablemodules, affectedchunks); +                     //common modules and Targetchunk binding association relationships -                     //chunk.addmodule (module); Module.addchunk (chunk); $                      This. Addextractedmodulestotargetchunk (Targetchunk, extractablemodules); $                     if( This. Filenametemplate) -Targetchunk.filenametemplate = This. filenametemplate; -                     if( This. Async) { the                         //removed modules chunk, set and targetchunk relationship, need first load targetchunk to load Chunkswithextractedmodules -                          This. Moveextractedchunkblockstotargetchunk (Chunkswithextractedmodules, targetchunk);WuyiAsyncchunk.origins = This. Extractoriginsofchunkswithextractedmodules (chunkswithextractedmodules); the                         return; -                     } Wu                     //Set Parent relationship for Affectedchunks and Targetchunk -                      This. Maketargetchunkparentofaffectedchunks (Affectedchunks, targetchunk);  About                 }); $                 return true; -             }); -         }); -}

Code logic is not very complex, mainly the relationship between chunks and the relationship between chunks and modules how to maintain, for unclear webpack packaging mechanism of people, it is difficult to understand for a time. In fact, I do not know very well.

According to my Chinese comments above, we have some help to understand. We will find that there is no direct relation to our problems.

Back to our question, the asynchronous module, how can the common module be split, the large module Echarts,ace editor and so on separate packaging, and can handle the relationship itself, when needed to be loaded asynchronously?

In fact, the answer to the final question is very simple, it is necessary to implement automatic asynchronous loading, it must still be with the help of commonschunkplugin async, we can according to the actual situation, through the minchunks, echarts,ace this large library first async packaging, In this way, according to Router's async packaging, naturally no more echarts,ace, look at the current configuration

1         NewWebpack.optimize.CommonsChunkPlugin ({2Names: [' Vendor ', ' Libs ', ' manifest ']3         }),4         NewWebpack.optimize.CommonsChunkPlugin ({5Async: ' Brace ',6Minchunks:function(module, count) {7                 varPath = '/public/node_modules ';8                 varResource =Module.resource;9                 if(Resource &&Ten                         ( OneResource.indexof (' ${path}/_brace ')!==-1 | | AResource.indexof (' ${path}/brace ')!==-1 -                         ) -                 ) { the                     return true -                 } -                 return false; -             } +         }), -         NewWebpack.optimize.CommonsChunkPlugin ({ +Async: ' Echarts ', AMinchunks:function(module, count) { at                 varPath = '/public/node_modules '; -                 varResource =Module.resource; -                 if(Resource && -                         ( -Module.resource.indexOf (' ${path}/_echarts ')!==-1 | | -Module.resource.indexOf (' ${path}/echarts ')!==-1 | | inModule.resource.indexOf (' ${path}/zrender ')!==-1 | | -Module.resource.indexOf (' ${path}/_zrender ')!==-1 to                         ) +                 ) { -                     return true the                 } *                 return false; $             }Panax Notoginseng         }), -         NewWebpack.optimize.CommonsChunkPlugin ({ theAsync: ' Async ', +Minchunks:2 A}),

　　

Based on Commonschunkplugin,webpack packaging optimization