关于webpack:webpack

mode: development\production

entry

output

devtool

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

optimization

1. tree shaking: 过滤导入没用的代码；production 下默认关上
   package.json: sideEffects

2. code splitting 代码宰割

    默认配置
   splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1, // 援用次数
      maxAsyncRequests: 30, // 最大并行申请数
      maxInitialRequests: 30, // 入口点最大并行申请数
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: { // 第三方包
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: { // 业务代码
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
   }

   缓存：output：filename: [name].[contenthash].js

   shimming

   懒加载 lazy loading：通过 import 动静引入，实现懒加载（webpackPrefetch、webpackPreload）

   打包剖析 webpack-bundle-analyzer

   css 代码宰割