webpack优化环境配置

 

 

    HMR:                hot热模块替换
    source-map:         开发调试模式，映射源代码
    oneOf:              只处理一次
    缓存:               hash 、 chunkhash 、 contenthash
    树摇:               去除无用代码
    codeSplit:          代码分割(并行加载/按需加载)
    懒加载/预加载
    pwa                 workbox-webpack-plugin
    多进程打包           thread-loader
    externals           让某些文件不打包
    dll                 单独打包

 

优化环境配置总结：

# webpack性能优化
* 开发环境性能优化
* 生产环境性能优化

## 开发环境性能优化
* 优化打包构建速度
    * HMR   热模块替换(有1改1而不是有1改全)
* 优化代码调试
    * source-map    代码映射

## 生产环境性能优化
* 优化打包构建速度
    * oneOf 
    * babel缓存     优化打包构建速度
    * 多进程打包    开销大≈600ms
    * externals     不打包什么库,彻底不打包,得手动连接CDN          
    * dll           单独打包，配置好可自动引入CDN
* 优化代码运行的性能
    * 缓存(hash-chunkhash-contenthash)
    * tree shaking      清除未使用代码(es6 and production;package.json:sideEffect:[xxx])
    * code split        单入口,多入口(bundle分割,并行加载)(细化第三方库)optimization
    * 懒加载/预加载     异步代码分割,条件触发时加载/main资源加载完自动加载,兼容性严重
    * pwa               离线可访问技术(渐进式网络开发应用程序)serviceWorker