Post the webPack3 configuration of the previous Vue scaffolding:

App.js is the entry JS, vendor is the code block extracted by extracting the public module plug-in (the modular code part of Webpack itself), and manifest is based on vendor, and then extracted the part that should be changed frequently, such as the content of asynchronous loading JS module part.

It can also be seen from the screenshot that Vendor’s file size is the largest, as it contains the code for the entire vue framework, as well as the modular code for Webpack.

As for the manifest, it is mainly an implementation of asynchronous loading (dynamically introducing JS by creating a script), which contains the file name and path of asynchronous JS

1. CommonsChunkPlugin extracts common parts rather than “frequently moving parts “;

Webpack will inject the definition of webpackJsonp into the chunk produced by the last CommonsChunkPlugin, as well as the definition of asynchronous loading. This definition will involve the MD5 of all entries and chunks, so it will “change frequently”. At the same time, the default vendor of VUe-CLI is to package all dependencies under node_module, which can be very large. In the production environment, the cache should be used to speed up the loading of files that are too large, but “constant change” is not good for caching. Therefore, in order to isolate entry(app.js) changes from vendor, VUe-CLI makes an extra chunk of manifest after vendor, so that entry will not affect Vendor as long as it does not introduce new packages in node_modules.

Ps: So it doesn’t really matter how many compilations it takes. All files are compiled again every time they are packaged.

The following instructions are interpreted only in accordance with the vuE-CLI family bucket default configuration. Please point out any errors:

App.js: Basically the app.vue(.vue or.js?) that you actually wrote. Can’t run without this page.

Vendor.js :vue- CLI family bucket default configuration this chunk is to package all dependencies from node_modules/ require(import) into this chunk. So this is all the js files required (import) under node_modules/

Manifest.js: the last chunk that is injected with the definition of webpackJsonp and the definition of asynchronous loading (webpack calls CommonsChunkPlugin to handle the core of post-module management, because it is the core, so it must be loaded first, or an error will be reported).

Downsizing:

Due to the default vendor’s packaging strategy, this chunk is very large, so there is basically nothing to simplify according to the default configuration. To simplify, we need to modify the packaging strategy of each chunk based on the actual project (reduce the package size as much as possible to speed up the first-screen loading).

Optimization:

A single page is basically the same as streamlining. For multiple pages, it feels like we should customize vendor’s packaging strategy. After all, not all pages will use the full amount of third-party dependencies, and appropriately reducing vendor’s volume can improve the loading speed.

Mark: webpack.optimize.Com monsChunkPlugin in webpack3 has been deprecated, webpack4 config. You need to use the new configuration optimization. SplitChunks