webpack 优化策略

breeze -
  • babel: 使用缓存，use: ['babel-loader?cacheDirectory']
  • resolve.alias: 使用别名，直接引用打包好的库
  • module.noParse: 忽略没有采用模块化的文件库，不让 webpack 解析
  • 使用 DllPlugin: 将基本库打包成单独的文件
  • 使用 HappyPack: 开启多进程打包
  • 使用 ParalleUglifyPlugin: 开启多进程压缩 js
  • 使用自动刷新: watch:true
  • HMR: plugin.push(new HotModuleReplacementPlugin())
  • cdn: publicPath
  • 开启 Tree Shaking: babel 保留 ES6 的模块 "modules": false
  • 提取公共代码: CommonsChunkPlugin
  • 按需加载: import(/* webpackChunkName: "name" */ 'path').then()
  • 开启 Scope Hoisting: ModuleConcatenationPlugin
  • 输出分析: webpack --profile --json > analyse.json && webpack-bundle-analyzer