Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of webpack2 cache optimization methods, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this webpack2 cache optimization method article. Let's take a look at it.

With the application of MVVM such as Vue,react, new language features such as ES6 have been introduced into browser-side development. Webpack, which can efficiently organize component code and use features such as ES6 import references, is used by many business projects.

1. An example of "pollution"

Like the directory structure shown in the figure above, the project has three separate entry files placed in the pages directory, which together rely on a vue.min.js, different files depend on alib.js,blib.js, and a vue component list.vue;. We use the following configuration to generate an one-to-one compiled file for each js file.

Run gulp webpack under the LsLoader directory, analyze the dependencies, and webpack starts to package. The result is as follows

It looks beautiful, so now we have something to change in the project. In list2.js, the original reference code is

Import a from'.. / lib/alib.js'

Now we need to add a dependency, which should be->

Import a from'.. / lib/alib.js'

Import b from'.. / lib/blib.js'

After modification, gulp webpack and webpack are packaged. According to reason, only list2.js will change, and the new md5 will be downloaded to the client by the user. What's the actual result?

How did you change one file? the others have changed. I haven't moved at all. I modified a file and the cache of other pages also knelt. It's not scientific.

This kind of phenomenon, I call packing accidental pollution.

2. Pollution principle

Observe the source code we packaged before and after the comparison, except for the page_list2 file is really modified, alibjs and other files did not change the result file of the source code after the point of change here

First compilation: webpackJsonp ([3], {

Second compilation: webpackJsonp ([4], {

The vuemin.js library file is modified in the

First compilation: 3:

(function (module, exports, _ _ webpack_require__) {

Module.exports = _ _ webpack_require__ ("YOc6")

})

Second compilation: 4:

(function (module, exports, _ _ webpack_require__) {

Module.exports = _ _ webpack_require__ ("YOc6")

})

The numbers are all + 1, and we have added a module that refers to the numeric sequence number of all the compiled results. What is this number?

These are the moduleID and chunckID that webpack uses in conjunction with the webpackJSONP function when running in the browser

Webpack various loader load .vue .css .js various format components behind is to compile the loader file to convert the browser does not recognize the file into an executable code block, the code block is marked with two arrays, moduleIDs array and chunkIDs array, put in the webpack source code, the runtime based on the number of modules encountered and the number of chunk self-increasing to determine uniqueness. Chunk can be understood as a file-level block of code, compiled as a separate js file that can be referenced by the entry file. Module is the code paragraphs within chunk.

Among them, module is divided into normalModule and contextModule.

NormalModule is easy to understand, which is the ordinary module code. Es6 export is translated into es5 form and used in parcels.

ContextModule is special in that a non-entry file exposes a piece of code of the internal module, such as

(function (module, exports, _ _ webpack_require__) {

Module.exports = _ _ webpack_require__ ("0YW9"); / / expose the internal normal module

})

This is the end of this article on "methods of webpack2 cache optimization". Thank you for reading! I believe that everyone has a certain understanding of the "webpack2 cache optimization method" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.