webpack打包优化

优化配置

• 优化：尽量减少搜索的范围
  • 当你引入一个模块的时候需要去解析，配置解析路径
    resolve: {
    modules: ['node_modules', './lib']
    },
  • 配置别名查找 alias
  • 配置扩展名 extensions
  • 配置mainFields + noParser 可以直接指定地址查找，并且不递归打包找到的已经打包好的文件
  • happypack多进程打包
  • ParallelUglifyPlugin 并行压缩
  • 配置loader的解析include + excludes 指定解析的目录
  • 配置dll:动态链接库，需要单独配置， 需要两个插件dllPlugin和refrense。。
• tree-shaking（webpack4 production模式已经支持）
  • 依靠es6的mobule模块解析，如果不是es6就不能实现

提取公共代码

optimization: {
splitChunks: {
}
}

scope hoistring: 作用域提升（webpack4 production模式已经支持）

• scope hositing,减少函数声明，把函数合并
• new webpack.optimize.ModuleConcatenationPlugin();
• 体积更小

代码分离，模块懒加载

• import().then() // es7 的语法,它在webpack里是天然的分割点
• 原理：jsonp回调