#开发环境性能优化

1.优化打包构建速度

2.优化代码调试

#生产环境性能优化

1.优化打包构建速度

2.优化代码运行的性能

开发环境：

HMR:热模块替换（一个模块发生变化，只会重新打包这个模块） target:'web'

devtool:sorce-map:源代码映射到构建代码（inline-source-map内联 hidden-source-map外联 eval-source-map内联 nosource-source-map外联 cheap-source-map外联 cheap-module-source-map外联）

开发环境（调试更友好）：eval-source-map 

生产环境：source-map

生产环境：

oneOf:[] //一个loader只处理一种文件

babel缓存：给babel-loader配置cacheDirectory:true(第二次构建时，会读取之前的缓存)。

文件资源缓存：hash值的方法（输出文件带上[hash:6] 存在一定问题，当修改css或者js时，因为公用一个hash值，所以重新打包，会导致所有缓存失效  使用chunkhash，因为css是由js引入的，所以还是无法解决问题   使用contenthash根据文件的内容生成hash值）

tree shaking:去除无用代码

code split：代码分割

1)使用多入口，最终输出多个js

2)optimization: {

      splitChunks: {

           chunks: 'all'

      }   

}//可以将noode_modules中代码单独打包成一份

3)使用js代码，让某个文件被单独打包成一份

懒加载和预加载（webpackPrefetch: true）

4)pwa技术：渐进式网络开发应用程序（离线可访问）

workbox --> workbox-webpack-plugin

5)多进程打包

下载thread-loader（一般配置给babel-loader）

6）externals:拒绝引进的包被打包，但需要注意的是需要在html中进入第三方的包

7）dll: 对某些库进行单独打包