#开发环境性能优化
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: 对某些库进行单独打包