webpack

配置

mode: ‘production’

• 在对代码进行打包的时候，会进行代码丑化，此时代码报错只会显示bundle.js文件的，不会找到源文件具体报错代码行。

devtool: ‘source-map

• 可以帮助丑化代码找到源代码报错的位置，经历了三个版本的迭代

babel

底层原理

• 编译器
• 
• 解析
• 编译
• 生成

webpack性能优化

分包

优点

• 加快首屏渲染速度，减少主包代码体积

代码分离

• 多入口起点
• 如果入口 chunk 之间包含一些重复的模块，那么这些重复模块都会被引入到各个 bundle 中。
• 这种方法不够灵活，并且不能动态地拆分应用程序逻辑中的核心代码。
  • 使用entry配置手动分离代码
  • 配置多个入口文件
  • 
• 防止重复
  • 使用Entry Dependencies或者SplitChunksPlugin去重合分离代码
• 动态导入
  • 通过模块的内联函数调用来分离代码
  • 第一种，也是推荐选择的方式，是使用符合 ECMAScript 提案 的 import() 语法 实现动态导入。
  • 第二种则是 webpack 的遗留功能，使用 webpack 特定的 require.ensure