Hello everyone, this is a little white front end of the more textual challenge. This is the first day of my participation in the August More text Challenge. For details, see: August more text Challenge.

preface

The interview will ask 🈶️ the following points, commonly used loader and plugin this should be known to everyone, I will not go into detail, among which the more important should be the last point, which is about improving performance and experience

  1. What are the differences between Webpack and grunt and gulp?
  2. What other tools are similar to WebPack? Why did you end up using WebPack?
  3. What are the common loaders? What problems do they solve?
  4. What are some common plugins? What problems do they solve?
  5. What is the difference between Loader and Plugin?
  6. Have Loader and Plugin been written? Describe how to write a Loader or plugin.
  7. How can You leverage WebPack to optimize front-end performance? (Improved performance and experience)

Here are my answers to the above questions:

Webpack is similar

rollup

  • Applicable to packaging of base libraries such as Vue, React

parcel

  • Suitable for simple experimental projects, it can meet the low threshold of quickly see results

Loader

configuration

  • Loader is configured in module.rules

Common Loader

  • file-loader

    • Output the file to a folder, and refer to the output file in the code by relative URL

  • url-loader

    • Similar to file-loader, but can use Base64 to inject the contents of a file into code even if the file is small

  • source-map-loader

    • Load additional Source Map files to facilitate breakpoint debugging

  • image-loader

    • Load and compress the image file

  • babel-loader

    • Convert ES6 to ES5

  • css-loader

    • The CSS supports modularization, compression, and file import

  • style-loader

    • Inject CSS code into JavaScript and load the CSS using DOM manipulation.

  • eslint-loader

    • Check JavaScript code with ESLint

  • .

Common Plugin

Plugins are configured separately in plugins

Common Plugin

  • define-plugin

    • Defining environment variables

  • commons-chunk-plugin

    • Extract common code

  • uglifyjs-webpack-plugin

    • Compress ES6 code with UglifyES

  • .

Loader and Plugin are different

loader

  • Webpack can only parse JS files natively. If you want to package other files as well, you will use the Loader. So what Loader does is it gives WebPack the ability to load and parse non-javascript files

plugin

  • Plugins can extend WebPack’s functionality and make WebPack more flexible

The file prints are?

The file fingerprint is the suffix of the output file name after the package

use

  • Hash

    • Related to the entire project build, the hash value for the entire project build changes whenever the project file is modified

  • Chunkhash

    • Related to the chunk of the Webpack, different entries produce different chunkhash

  • Contenthash

    • Hash is defined according to the file content. Contenthash remains unchanged if the file content does not change

In real projects, it is common to have hundreds of lines of configuration files. How do you ensure that each loader works as expected

Use Enforce to enforce the action order of loaders

Pre stands for execution before all normal loaders

Post is performed after all loaders

How to optimize Webpack build speed

Use higher versions of Webpack and Node.js

Multi-process/multi-instance build: HappyPack(not maintained), thread-loader

The compression code

  • Multi-process parallel compression

    • webpack-paralle-uglify-plugin
    • Uglifyjs-webpack-plugin enables parallel argument (ES6 not supported)
    • Terser-webpack-plugin enables the parallel argument

  • Use the mini-css-extract-plugin to extract the CSS code from the Chunk into a separate file, and use the minimize option of csS-loader to enable CSsnano to compress the CSS.

Image compression

  • Use Imagemin based on the Node library (many customization options, can handle a variety of image formats)
  • Configuration image – webpack – loader

Reduce the packaging scope

  • Exclude /include (determine the scope of the Loader rule)
  • Resolve.modules specifies the absolute path to third-party modules (reducing unnecessary looups)
  • Resolve. MainFields only uses the main field as the entry file description field (reduces the search step, needs to consider the entry file description field of all third-party modules that the runtime depends on).
  • Resolve. Extensions minimize the possibility of suffix attempts
  • NoParse ignores libraries that do not need to be parsed at all (not parsed but still packaged into bundles, note that omitted files should not contain modular statements such as import, require, define, etc.)
  • IgnorePlugin (completely exclude modules)
  • Use Alias properly

Extract page common resources

  • Basic package separation

    • Html-webpack-externals-plugin is used to introduce the base package through CDN without entering the bundle

  • Use SplitChunksPlugin (built-in to Webpack4) to separate (common scripts, base packages, and page common files) instead of CommonsChunkPlugin

DLL

  • Using the DllPlugin for subcontracting and using the DllReferencePlugin(index link) for referencing manifest.json, the code that is basically unchanged is packaged as a static resource first, avoiding the time of repeated compilation.
  • HashedModuleIdsPlugin can solve the module digital ID problem

Make full use of the cache to speed up the secondary build

  • Babel-loader Enables cache
  • The terser-webpack-plugin enables caching
  • Use the cache-loader or hard-source-webpack-plugin

Tree shaking

Scope hoisting

  • The code that is built will have a large number of closures, resulting in an increase in size, more scope for functions to be created while the code is running, and a high memory overhead. Scope reactically put all module code in a function Scope in reference order, then rename some variables appropriately to prevent variable name conflicts
  • In order to fully use Scope collieries, you need to configure mainFields to use ES6 modularized syntax as directed in JsNext: Main for third-party modules

Dynamic Polyfill

  • You are advised to use the polyfill-service to return only the required polyfill to the user and maintain the community

Have you written a Plugin? A brief description of how to write a Plugin?

Compiler exposes hooks that are relevant throughout the Webpack lifecycle

Compilation exposes less granular event hooks related to modules and dependencies

The plug-in needs to bind the Apply method to its prototype in order to access the Compiler instance

Babel principle

Parse: Convert the code to an AST

  • Parsing: Analyzing the token stream (the array generated above) and generating the AST
  • Lexical analysis: Split code (strings) into token streams, which are arrays of syntactic units

Transformation: Nodes accessing the AST perform transformation operations to produce a new AST

  • Taro is a small program syntax transformation using Babel

Generate: Generate code based on the new AST