webpack5 配置优化选项

分析工具

持久化缓存
- 提交二次构建性能（cache-loader...）
并行处理
- HappyPack 多进程方式运行资源加载（loader）逻辑
- Thread-loader 官方版多进程方式运行资源加载（loader）逻辑
- Parallel 多进程方式运行多个Webpack构建实例
- TerserWebpackPlugin 支持多进程方式执行代码压缩，uglify功能
减少编译范围
- resolve控制资源搜索范围
- include
- exclude
- npm module.noParse
- 跳过编译 no-parse
- npm库提前打包
  - Vue2 dist/vue.runtime.esm.js
  - Lodash lodash/lodash.js
- lazyCompilation
- webpack5新特性
- entry 或异步引用模块按需编译
编译步骤提升性能
- 禁止产物优化（开发期）
- TreeShaking (optimization.usedExports)
- SplitChunks (optimization.splitChunks)
- Minimizer (optimization.minimize)
- 模块合并 (optimization.concatenateModules)
- 最小watch范围
- watchOptions: { ignored: /node_modules/ }
- 跳过TS类型检查
- ESLint 忽略检查
- SourceMap
- eval 最佳编译速度
- source-map生成环境选用
- 缩小resolve搜索范围
- enhanced-resolve
  - 各种模块导入语句准确定位到模块对应的物理资源路径
  - resolve.enforceExtension = true
- extensions
  - 无后缀越多越慢，强制要求开发者提供明确的模块后缀名
- modules配置
  - module.exports = { resolve: { modules: [path.resolve(__dirname, 'node_modules')] } }
- 快速编译器
- esbuild
- swc
- babel替换ts-loader