Front-end interview data collation [Tools]

webpack

Principles of handling packets

webpack packaging principle

 执行run 命令 [
1. entry -> ast 编译（查询所有 import） -> 识别出 import 的相关引用，形成 dependency 树 -> 通过 loader 将代码转义，此步骤可忽略 -> ast 转义成 code -> 
2. 执行 build 命令 [递归返回所以依赖 -> 返回依赖树 dependency]
3. 执行 generate 命令 [将依赖树回填至打包的代码中 bundle.js ]
]

The difference between es module and commonjs

The difference between es module and commonjs

• cjs is a copy of the output value, esm is a reference to the output value
• cjs is running or loading (export.module returns the actual code, sequential execution, blocking execution), esm is the compile-time output interface (export returns the key mounted on webpack_require.d)
• cjs is synchronous, esm is asynchronous. (because it returns different)

loader and plugin

loader: is to decide how to process the file, eg from A to B. Usually what is returned is a piece of logic that represents how to process the file. This logic code will also be filled in the packaging file at the end.
plugin: is to complement the capabilities of webpack. Relying on the api provided by webpack for operation, the result after execution is returned.

resolve

Processing parsing, commonly used:

• extension The suffix of the parsing file, the default is js, json
• The package path resolved by modules, the default is node_modules.
• alias omits the partially resolved path notation.

optimization

Built-in optimizations such as compression, chunk packing.

other

• resolveLoader handles the loader resolution method

 resolveLoader: {
    alias: {
      'a-loader': path.resolve(__dirname, 'loaders/a.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'a-loader',
        exclude: /node_modules/
      }
    ]
  },
// 等价于
module: {
    rules: [
      {
        test: /\.js$/,
        use: path.resolve(__dirname, 'loaders/a.js'),
        exclude: /node_modules/
      }
    ]
  },

project

Above the fold loading optimization

• Lazy loading of components React.lazy()
• nginx gzip
• cdn
• Image compression, image lazy loading: intersectionObservers
• Code optimization: variable declaration and global variable reference in render can be used to reduce, reduce hierarchical structure and reduce dom
• webpackt code division, code splite is loaded on demand
• Module reference mode optimization, such as lodash on-demand reference, echart on-demand reference. It can be viewed through webpack-anylsis.
• Handle some dependencies through webpack alias
• code compression
• SSR (to be investigated)
• enable cache

What are the optimization schemes in the front end

Code optimization

• Global variable local reference, improve gc performance
• foreach loop > for > for ... in
• Avoid using closures, (returning parent function variables, also known as memory leaks)
• Reduce dom additions and deletions, reduce reflows and redraws, and use fragmentation
• Reduce access to clientHeight, etc. to clear the browser rendering optimization queue

Scaffolding optimization

• code compression
• image compression
• Leverage package management tools to optimize package references
• Handling of referenced packages, e.g. lodash/moment
• code separation
• wepack three shaking to remove redundant code
• webpack optimizer sideEffect removes unreferenced packages

React optimization

• Replace class component with function component
• Reduce the use of anonymous functions in the render function and replace them with class methods (reduce gc)

Server-side optimization

• gzip compression
• Enable negotiation cache
• cdn
• SSR