开发环境性能优化

优化打包构建速度

• HMR : 热更新

优化代码调试

• source-map ： 源代码映射错误

生产环境性能优化

优化打包构建速度

• oneOf : 打包文件时不会每次都执行一次 loader
• babel 缓存 : 代码压缩 es6 转 es5
• 多进程打包 thread-loader ： 运行loader时间长时， 可以使用 thread-loader多进程
• externals ： 忽略webpack 不对一些模块进行打包，需要时，手动在html中引入
• dll ： 配置dll， 对webpack引入的库进行打包为一个单独的文件， 用到直接引入，不再重复打包

优化代码运行的性能

• 文件资源缓存 (hash - chunkhash - contenthash) ： 文件生成一个 hash 值，相当于版本号，在运行代码时，根据hash执行加载不同的文件缓存
• tree shaking ： 将源码中没有使用到的代码或模块给移除
• code split ： 代码分割，单文件 多文件，将代码分为多个文件
• 懒加载 / 预加载 ：
• pwa ： 离线也能访问到加载时的内容