Jsliang Job Series – 36 – Summary of front-end engineering series

This series refers to 79 articles and summarizes 6 articles. Thank you for your support.

Babel

• ASTAbstract syntax tree is an abstract representation of the syntax structure of source code
• The principle of: The existing ES6+ code will be passed firstLexical analysis 和 Syntax analysisafterparsing 为 ASTAnd then put thisAST conversionFor we need formalASTAnd finally put thisASTConvert to ES5 or the desired format.

Article address: Webpack

• What is the: is essentially a module packer whose job is to package each module into a correspondingbundle
• The core concept:mode,entry,output,loader,plugin
• The build process: initialization, compilation, output, plug-in (Plugin) Always listen inWebpackBroadcast and called at some pointAPIChange the results.
• entry: Specifies the package entry file. Used to bestring, that is, an entry to a packaged file,objectOn a more,arrayMany to many
• output: Indicates the location of the packed file
• loader: Translation officer, processing different resources from right to left
• plugin: plugins, extensionsWebpackFunction, listenWebpackLife cycle, callAPIChange the output.
• resolveConfiguration:WebpackHow to find the file corresponding to the module.resolve.modules/extensions/include/exclude
• Configure Webpack from 0
  • Technology selection: a mobile terminal, MPA | | PC SPA, HTML, CSS | | template engine preprocessor, ES5 | ES6 +, Mock, React | | Vue, many people cooperation of single project, ESlint | TSlint, unit testing, submit specifications
  • Loader processes the CSS, Less, and Sass
  • Loader processing images
  • Loader processing font
  • Configuring Multi-page packing for Loader (MPA)
  • source map
  • webpack dev server
  • babel
  • react
  • Performance optimization
  • Others: parser, write Loader, write Plugin
• Lazy loading
  • The code segment:code splitting
  • Realize the principle of: Submodules are packaged separately and loaded lazily with the help of functions
  • Vue loads on demand
• Hot update
  • Open meansConfiguration:devServerAdd hot update plug-inHotModuleReplacementPlugin
  • Principle of thermal renewal
• Three kinds of hash:
  • hash: The entire project as long as there are file changes, then change
  • chunkhash: Corresponding to an entrychunkYou make a change, you generate a new onehashValue, does not affect otherchunk
  • contenthash: If the content of a file changes, the file is replaced and a new one is generatedhash, without affecting other files in the same module
• source map: The process of mapping compiled, packaged, and compressed code back to source code

Webpack-tree Shaking

• Tree Shaking: by thepackage.jsonIn the opensideEffects, will ES6 template syntaximportBehavior import files are marked as no side effects, and then open-pThe production model, letWebpackCall internalUglifyJSWebpackPluginTo remove unreferenced code.
• dead-codeThe code will not be executed, or the result of the execution will not be used, or the code will only affect dead variablesdead-code
• Side effects: if theimportImport code that does something special, called code with side effects, for examplepolyfillThe global scope is affected
• Static analysis: ES6 template syntax allows you to parse code literally without executing it. Static analysis isTree ShakingOn the basis of. whilerequireReferences are not known until they are executed, so they cannot be optimized through static analysis

Webpack-scope collieries

• Scope Hoisting: Webpack3 added functionality, enhanced scope. The principle is to analyze the reference relationship of modules, and merge the broken modules into the same function. ES6 template syntax is required for static analysis

Article address: Webpack simple implementation

• usingbabelComplete the code conversion and generate the dependencies of a single file
• Dependency map generation
• Generate the final package code

Webpack Performance Optimization

• resolve.modules: Used for configurationWebpackWhich directories to look for third-party modules (node_modules)
• resolve.extensions: When importing a path without a file suffix,WebpackWill automatically suffix to try to ask if the file exists, andresolve.extensionsUsed to configure the try suffix list; The default isextensions:['js', 'json']
• resolve.include/excludeTo:babel-loaderFor example, you can passinclude 和 excludeTo help us avoidnode_modulesThis kind of huge folder]
• The cache:cache-loader 和 uglifyjs-webpack-plugin, write the compilation result into the hard disk cache, next time if the file does not change, directly pull the cache
• Multiple processes:Happypack 和 thread-loader, the task is decomposed into multiple sub-processes for concurrent execution to improve packaging efficiency
• Multiprocess compression:Webpackbuilt-inUglifyJSWebpackPluginCompression plug-ins are single-threaded, whileTerserWebpackPluginCan execute in parallel (multithreading)
• Static resource separation:CommonsChunkPluginsEach build is rebuiltvendorFor efficiency reasonsDllPluginThird-party libraries can be packaged separately into a file and repackaged only when version changes depend on themselves
• Packaged resource compression:
  • JS compression:UglifyJSWebpackPlugin 和 TerserWebpackPlugin
  • HTML compression:HtmlWebpackPlugin
  • CSS compression:MiniCssExtractPlugin
  • Image compression:ImageWebpackPlugin
  • Gzip compression: does not include images
• Tree Shaking
• Scope Hoisiting
• According to the need to load

There are 79 references in this series.

2020:

• How do you develop and deploy front-end code in large companies?【 Reading Suggestions: 10min】
• Front-end Advancements: The evolution of front-end deployment【 Reading Suggestions: 20min】

2019:

• Thinking and practice of front-end isomorphic rendering【 Reading Suggestions: 20min】

2018:

• Why do front-end engineers learn compilation principles?[Recommended Reading: 30min]
• 50 lines of MVVM, feel the art of closures【 Reading Suggestions: 10min】
• Excuse me! Take ten minutes of your time and let MVVM principles return to you【 Reading Suggestions: 20min】
• 2018 Front-end Performance Optimization list[Recommended Reading: 30min]
• Page picture loading optimization scheme【 Reading Suggestions: 20min】
• How to gracefully handle front-end exceptions[Recommended Reading: 30min]

• An article about what front-end development must know about Babel【 Reading Suggestions: 10min】
• Babel7 knowledge not to be missed[Recommended Reading: 30min]
• What front-end engineers need to know about Babel[Recommended Reading: 30min]
• Babel: Architecture and Principles + Practice[Recommended Reading: 30min]
• Babel: Plugins don’t produce Macros[Recommended Reading: 30min]
• Front end engineer ego. – That Babel thing【 Reading Suggestions: 20min】
• Front end and compilation principle – write a JS interpreter with JS【 Reading Suggestions: 20min】
• Interviewer: Have you heard about Babel? Have you ever written a Babel plug-in? A: No. pawn【 Reading Suggestions: 10min】
• Getting started with Babel – Implementing an ES6 class converter【 Reading Suggestions: 10min】

• Write a simple JavaScript template engine【 Reading Suggestions: 5min】
• JavaScript template engine principles, a few lines of codeReading Suggestions: 10min
• Vue template compilation principle[Recommended Reading: 30min]

• 5 minutes for a front-end performance monitoring tool【 Reading Suggestions: 10min】
• Do the best front-end monitoring【 Reading Suggestions: 10min】
• GMTC best practices for front-end monitoring in the big front-end era【 Reading Suggestions: 20min】
• Front-end monitoring and front-end buried point design【 Reading Suggestions: 20min】
• Tencent CDC team: front-end abnormal monitoring solution【 Reading Suggestions: 20min】
• Do the best front-end monitoring【 Reading Suggestions: 10min】

The Webpack series references 52 articles.

Other:

• Webpack Chinese document[Reading Suggestions: None]
• Webpack little book[Reading Suggestions: None]

Articles in 2020:

• A dozen more Webpack interview questions[Reading Suggestions: 1H]
• Deep Unlock Webpack series (Basics)[Reading Suggestions: 1H]
• Deep Unlock Webpack series (Advanced)[Recommended Reading: 30min]
• Unlock the Webpack series in depth【 Reading Suggestions: 20min】
• Webpack Loader from start to understand series: VUe-loader【 Reading Suggestions: 20min】
• Webpack Loader from start to understand series: style-loader【 Reading Suggestions: 20min】
• Lin Dull road to Webpack -loader chapter【 Reading Suggestions: 20min】
• Reveal webpack plugin[Recommended Reading: 30min]

Articles in 2019:

• 14 facts about webpack4, honestly[Recommended Reading: 30min]
• Implement a simple Webpack[Reading Suggestions: 1H]
• Master Webpack compilation process[Reading Suggestions: 1H]
• Front-end engineers have to master the WebPack Loader[Recommended Reading: 30min]
• Easy to understand the webpack hot update principle[Reading Suggestions: 1H]
• The 5 most confusing points in webpack[Recommended Reading: 30min]
• Front-end build tips[Recommended Reading: 30min]

Articles in 2018:

• Hand by hand teach you a Webpack Loader[Reading Suggestions: 1H]
• Hand by hand teach you a simple Webpack[Recommended Reading: 30min]
• Webpack Unravelling – The path to the advanced front end[Recommended Reading: 30min]
• Webpack,[Reading Suggestions: 1H]
• Webpack4 – use it for the first time, click it together 11 times[Recommended Reading: 30min]
• Take you into the webpack world, become the number one Webpack player.【 Reading Suggestions: 20min】
• Do you really master loader? 10 q – loader【 Reading Suggestions: 20min】
• Webpack after the file too large solution【 Reading Suggestions: 10min】
• Build React development environment based on Webpack【 Reading Suggestions: 10min】

Article 2017:

• Webpack source (a) – Tapable and event stream【 Reading Suggestions: 10min】

Articles in 2019:

• Webpack Optimization – Double your build efficiency【 Reading Suggestions: 10min】
• Performance Optimization -Webpack build speed optimization【 Reading Suggestions: 10min】
• Improved compilation speed by 180% with webpack4【 Reading Suggestions: 10min】
• Multi-process parallel compression code【 Reading Suggestions: 5min】
• Webpack 4: Code Splitting and Chunks segmentation optimization【 Reading Suggestions: 5min】

Articles in 2018:

• Tree-Shaking Performance Optimization Practices – Principles【 Reading Suggestions: 10min】
• Volume reduced by 80%! Unleash the true potential of Webpack tree-shaking【 Reading Suggestions: 10min】
• Your tree-shaking is not good for eggs【 Reading Suggestions: 5min】
• How does WebPack eliminate useless code through scope analysis【 Reading Suggestions: 5min】
• Let your Webpack take off – Koala members backstage Webpack optimization practice【 Reading Suggestions: 5min】
• Webpack dllPlugin package volume and speed optimization【 Reading Suggestions: 5min】
• Code Splitting for Webpack optimization【 Reading Suggestions: 5min】

Articles of 2017:

• Webpack package optimization for speed【 Reading Suggestions: 5min】
• Speed up Webpack- Narrow file search【 Reading Suggestions: 5min】
• Code Splitting for Webpack【 Reading Suggestions: 5min】

• What is the scope reactive of Webpack?【 Reading Suggestions: 5min】
• Optimize Webpack output by Scope reactive【 Reading Suggestions: 5min】
• 【Webpack】654- The Great Webpack Scope Reactive Learning Guide【 Reading Suggestions: 5min】

• Tree shaver-webpack 5.0.0-rC.0[Reading Suggestions: For reference only]
• Webpack 4 Tree Shaking Ultimate Optimization Guide[Recommended Reading: 30min]
• Tree-Shaking Performance Optimization Practices – Principles – 2018[Reading Suggestions: For reference only]
• Webpack4: Tree- Shaking Depth Parsing – 2019[Reading Suggestions: For reference only]

• Vue Webpack packaging optimization – Route lazy loading (load on demand) principle and usage description【 Reading Suggestions: 20min】
• Lazy loading – Webpack V5.0.0 – RC.0【 Reading Suggestions: 5min】
• Code splitting for Webpack (same with route lazy loading)【 Reading Suggestions: 10min】

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.