mode: development\production

entry

output

devtool

  1. contentBase
  2. open
  3. port
  4. proxy
  5. hot

optimization

  1. Tree shaking: Filtering imported unused code; Json: sideEffects by default

  2. Code splitting

    SplitChunks: {chunks: 'async', minSize: 200000, minRemainingSize: 0, minChunks: 1, maxAsyncRequests: MaxInitialRequests: 30, maxInitialRequests: 30, enforceSizeThreshold: 50000, cacheGroups: {defaultVendors: {// third-party package test: /[\\/]node_modules[\\/]/, priority: -10, reuseExistingChunk: true,}, default: {// service code minChunks: chunks: 2, priority: -20, reuseExistingChunk: true, }, }, }

    Cache: output: filename: [name].[Contenthash].js

    shimming

    Lazy loading: Dynamic import is used to implement lazy loading (webpackPrefetch, webpackPreload).

    Package analysis webpack-bundle-Analyzer

    CSS code segmentation