Front end webpack


Reference video article:

Front end webpack

Front end webpack…

  1. webpack

  2. brief introduction

Webpack is a front-end resource building tool, a static module bundler.

In the view of webpack, all resource files (JS / JSON / CSS / img / less /…) of the front end will be processed as modules.

It will perform static analysis according to the dependency of the module and package the corresponding static resources (bundles).

  1. 5 cores

  • Entry entry: indicates which file is the starting point for webpack to start packaging, analyze and build the internal dependency diagram and trunk.

  • Output: indicates where and how to name the resource bundles packaged by the webpack.

  • Enable webpack to handle non JS files, such as style files and picture files (webpack only understands JS)

  • Plugins plug-in: object,

Can be used to perform a wider range of tasks. Plug ins range from packaging optimization and compression to redefining variables in the environment, which is equivalent to hook functions.

  • Mode mode: indicates that the webpack uses the configuration of the corresponding mode, development development mode and production mode.

Loader: function, file converter and file conversion during construction; a.less=>a.css

Front end webpack

Front end webpack

  1. Installation of webpack

  2. Webpack packaging principle

  3. First, recursively identify dependencies and build dependency maps

  4. Convert code into ast abstract syntax tree

  5. Process code in AST

  6. Turn the ast abstract syntax tree into code that can be recognized by the browser and output it

  1. Webpack packaging process

  2. Identify entry file

  3. Identify module dependencies layer by layer. (commonjs, AMD or ES6 import and webpack will analyze them to obtain code dependencies)

  4. What webpack does is analyze the code. Convert code, compile code, output code

  5. Finally, the packaged code is formed

(1) Convert code to ast abstract syntax tree

utilize   babel-parser   transformation

The code is in the converttoast.js file

(2) Dependency found

Traverse the ast abstract syntax tree

Dependency found for file

The code is in converttodependency.js

(3) Convert the abstract syntax tree into code that the browser can run

The code is in converttocode.js

(4) Traverse the dependencies to find all dependencies and obtain the dependency map

The code is in makedependenciesgraph.js

(5) Generate code

The code is in generatecode.js

  1. Webpack compilation process

Front end webpack

  1. Webpack lifecycle

Front end webpack

  1. preparation

  2. @Babel / parser: analyze the file contents we read through fs.readfilesync and return ast (abstract syntax tree)

  3. @Babel / traverse: you can traverse the AST to get the necessary data

  4. @Babel / core: Babel core module, which has a transformfromast method, which can convert ast into code that the browser can run

  5. @Babel / preset env: convert code to Es5 code

Ast abstract syntax tree:

Lexical analysis: take each item apart.

Syntax analysis: combine token streams according to logical relationships

Front end webpack

Vue-loaderPlug in vueloaderplugin

The build and config folders in vue2 are used to configure webpack

Loader plugin optimization

What’s the difference

Handwritten loader

  1. babel

What is Babel: it’s a JavaScript compiler

  • Babel is a tool chain, which is mainly used to convert the code of ECMAScript 2015 + version into backward compatible JavaScript syntax, so that it can run in current and old versions of browsers or other environments.

What can be done:

  • grammatical transformation

  • Add missing features in the target environment through Polyfill (through @ Babel / Polyfill module)

  • Source code conversion (codemods)

  1. babel-loader

Babel loader: to load Babel

When Babel loader is executed, it may produce some duplicate public files during operation, resulting in code volume redundancy and slowing down the compilation efficiency.


  1. Restrict the loader to only handle specific directories, Babel loader and include

  2. Noparse (the module should not contain import, require, define)

  3. Speed up the resolution. Don’t add too many extensions. Put the common ones in front

Front end webpack

Front end webpack

  1. Babel Polyfill gasket

Front end webpack

  1. tree shaking

Function: webpack2 adds tree shaking. Tree shaking a module introduces bmodule to shake out unused code and package inapplicable code

Principle: eliminate useless JS code, and the compiler can judge that some codes do not affect the output. It is a new implementation of DCE

Uglifyjs is used in the front end, and the core is the nested reference relationship of ES6 module

The elimination principle of tree shaking uses the characteristics of ES6 module

ES6 modules remove redundant code

Commonjs load on demand


Rollback Babel + webpack packaging

Uglifyjs: code compression optimization tool, which is the core of tree shaking to delete code

Uglify does not have complete program flow analysis

Rollup program flow analysis

Babel causes side effect code

Webpack: export es mode is not supported

Rollup: packaging tool library component library supports es module problem: ecology is not good

Manifestplugin: determine the file entry

Plugin mechanism of webpack


Don’t change the overall situation

vue2 rollup

Package before compile

  1. Dllplugin

  2. scope hoisting

Front end webpack

Implementation principle: analyze the dependencies between modules and combine the scattered modules into one function as much as possible, but the premise is that code redundancy cannot be caused. Therefore, only those modules that have been referenced once can be merged.

  1. Code splitting

Code splitting function: split code and optimize related configurations

How to optimize webpack:

  1. Entry points: multiple entry points are packaged separately

  2. Prevent duplication: remove the third-party library Vander and webpack to remove duplicate references through the Commons chunkplugin plug-in

  3. Then pull off the repeat assembly.

  4. Dynamic imports: dynamic loading

Commons chunkplugin is no longer used in webpack4.


Automatic separation vender

Code splitting and chunks

Chunk: what’s packed

Split it and put it back together

The problem of the old version: it is impossible to distinguish between parent and child levels and find the corresponding relationship

Therefore, the new chunk graph introduces a new object, chunkgroups, which contains multiple chunks

New plugin splitchunksplugin

Set cachedirectory to true

  1. Happypack is not updated, thread loader

Happypack allows webpack to process multiple tasks at the same time, give full play to the ability of multi-core CPU, decompose tasks to multiple sub processes for concurrent execution, and send the results to the main process after the sub processes are processed. Accelerate code construction through multi process model.

  1. thread-loader

Webpack4 official recommendation

  1. Webpack hot update

2、 Compilation and construction process of webpack

  1. Implementation principle

  2. Webpack dev server starts the local service
  3. Modify the entry configuration of webpack.config.js
  4. Listening webpack compilation ends
  5. Webpack listens for file changes
  6. The browser received notification of hot updates
  7. HotModuleReplacementPlugin
  8. start hot update
  9. Hotapply hot update module replacement

① Deleting expired modules is the module that needs to be replaced

② Add a new module to modules

③ Pass__ webpack_ require__ Execute the code of the relevant module

Front end webpack

  1. How to optimize the performance of webpack

  2. Cache:

    1. Most of the problems are solved by Babel loader. In Babel loader, you can start the cache by setting the cachedirectory.
    2. The loader does not support caching. You can use cache loader
  3. Multi core / multi process:

    1. Happypack is decomposed into multiple sub processes and executed concurrently
    2. Configuration items such as parallel are generally provided for you to enable multi-core compilation
  4. Pull off

    1. One way is to use the webpack DLL plugin to package these static dependencies separately during the first build. In the future, you only need to refer to this long-standing static dependency package, which is somewhat similar to the concept of "precompiling";


  1. The other is the external approach, which is common in the industry. We exclude these static resources that do not need to be packaged from the construction logic, and use the CDN approach to reference them.

  2. split

    1. Docker, virtual physical machine
  3. Compressed code

Front end webpack

  1. What are the ways to optimize website performance?

  2. Merge JS, merge CSS, image Sprite, image compression

  3. Delayed loading content: lazy loading of pictures and lazy loading of data

  4. Using offline caching, the mobile terminal can store JS and CSS with less changes locally

  5. CSS, JS placement position

  6. Reduce HTTP requests

  7. Skeleton screen

Home page loading performance optimization to improve page performance:

  • Reduce package size  : Webpack packaging optimization, treeshaking uglify optimization, loading on demand.

  • Speed up HTTP requests: CDN  : Sprite chart,   Big picture,   Third party plug-in connection

  • Page placement order: CSS, JS

  • Reduce page rearrangement and redraw

  • Server side rendering, slow interface response, etc

  • Extending: skeleton screens   pre-render    Lazy loading

Packaging Optimization: using cache and multi-threaded packaging to reduce the scope of file search,

  1. From input URL to page rendering?

  2. DNS resolution:

  3. TCP connection

  4. Send HTTP request

  5. Server response:

  6. Webpack Optimization: happypack, tree shaking

  7. Browser parsing page

  8. CDN

The content distribution network has this configuration all over the country. Warehouse distribution network similar to rookie.

Solve the problem of distributed bandwidth distribution. Distribute in advance

CDN: cache and back to source

Using CDN mirroring

Multiple servers

Using CDN caching,

CDN network

Modify DNS resolution

Global load balancing

DNS resolution, get

CDN key technologies:

  1. Cache algorithm

  2. Distribution capacity

  3. Load balancing (nginx), intelligent call

  4. DNS based

  5. Support protocol, picture acceleration

CDN is required for high traffic networks,


Request CDN dedicated DNS server

According to the user’s IP address,

Server node:

Edge node:

CND network consists of central node and edge node

Central node: general warehouse

Edge node: an off-site distribution node, which is composed of load balancing devices,

CDN related technologies:

  1. Content publishing

  2. Content storage

  3. Content routing: route redirection, DNS mechanism

  4. Content management:

Accessing CDN and not accessing through CDN

CNAME process

Back to source:

Find your own server

In addition to static resources, can APIs be cached

Third party libraries are loaded using CDN

How to judge how CDNs update data when resources expire

Active push passive pull

Actively push data from the server to CDN

Webpack variable boost cache strong cache negotiation cache

Preload pre render

  1. DNS domain name resolution Root domain

Authoritative domain. Top level domain. Root domain

  1. The root domain name The root domain is not displayed

DNS mainly through


  1. Top level domains and top level servers

The location of win is the top-level domain

  1. National top-level domain name

  2. Generic top-level domain name

  3. xx

  4. Authoritative DNS and authoritative domain name server

  5. Operator DNS server and local DNS server

Recursive query: the host queries the local server

Iterative query:

CNAME alias points to: resolve domain name to domain name

To solve the problem of serious request delay, DNS pre parsing is used.

Des prefetch, multi page repeated DNS pre resolution will speed up

Browser cache

DNS prefetching Technology

DNS domain name resolution process:

  1. Find browser cache

  2. Find system cache

  3. Find router cache

  4. Find ISP DNS cache

  5. Recursively searching

DNS Security Issues

  1. DNS spoofing: changing IP addresses

  2. Denial of service attack

  3. Distributed denial of service attack

  4. Buffer overflow attack

DNS network performance optimization

  1. Reduce DNS lookup and avoid redirection

  2. DNS pre resolution

Recommended Today

Object memory layout and object access location

First, feel the memory layout through an example CustomerTest public class CustomerTest { public static void main(String[] args) { Customer cust = new Customer(); } } Customer image.png Memory layout at this time image.png notice: 1. Runtime metadata:There are some information describing the current instance, such as hash value and lock status.2. Name is the […]