这是我参与更文挑战的第1天，活动详情查看： 更文挑战
一.开发环境性能优化
1. 优化打包构建速度 -------- HMR
- hot module replacement 热更新
作用：一个模块发生变化更新局部变化模块，极大提升构建速度 开发效率
范围：（1）样式文件（可以使用HMR功能，style-loader内部实现了）
（2）js文件（默认不能使用HMR功能，HMR对js的处理，只能处理非入口js文件的其他文件。）
解决方案：
if (module.hot){
// 一旦module.hot为true，说明开启了HMR功能。 -->让HMR功能代码生效
module.hot.accept('./print.js', function(){
// 方法会监听print.js文件的变化，一旦发生变化，其他模块不会重新打包构建。
//会执行后面的回调函数
print( );
})
（3）html文件: 默认不能使用HMR功能，同时会导致问题: html 文件不能热更新了
解决方案：
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
...
}
2. 优化代码调试 -------- source-map
(一种提供源代码到构建后代码映射技术(如果构建后代码出错了，通过映射可以追踪源代码错误))
- source-map
- 外部
- 能提示错误代码准确信息和源代码的错误位置
- inline-source-map
- 内联
- 只生成一个内联source-map
- 能提示错误代码准确信息和源代码的错误位置
- hidden-source-map
- 外部
- 能提示错误代码错误原因，但是没有错误位置
- 不能追踪源代码错误，只能提示到构建后代码的错误位置
- eval-source-map
- 内联
- 每一个文件都生成对应的source-map, 都在eval
- 能提示错误代码准确信息和源代码的错误位置
- nosources-source-map
- 外部
- 错误代码准确信息，但是没有任何源代码信息
- 防止源代码泄漏
- cheap-source-map
- 外部
- 能提示错误代码准确信息和源代码的错误位置
- 只能精确到行，而source-map能精确到列
- cheap-module-source-map
- 外部
- 能提示错误代码准确信息和源代码的错误位置
- module会将loader的source map加入
- 内联和外部的区别
1.外部生成了文件，内联没有
2.内联构建速度更快
- 开发环境需求: 速度快,调试更友好
速度快慢(eval> inline> cheap>…)
- 生产环境:源代码要不要隐藏?调试要不要更友好
二.生产环境性能优化
1.优化打包构建速度
（1）oneOf
（2）babel缓存（cacheDirectory: true）让第二次打包构建速度更快
（3）多进程打包（npm_ i thread- loader -D）
2.优化代码运行性能
（1）文件资源缓存（hash，chunkhash，contenthash）让代码上线运行缓存更好使用
（2）tree shaking（树摇是为了去除我们在应用程序中没有使用的代码）
条件：（1.必须使用es6模块化 2.开启production环境）
作用：减少代码体积
副作用：可能会把js中引入的css和谐了
方案
// 所有代码都没有副作用( 都可以进行tree shaking )
"sideEffects": false
//问题:可能会把css / @babel/polyfill (副作用) 文件干掉
//解决：
"sideEffects": ["*.css", "*.less" ]
（3）code split
单入口项目----直接打包只会打包成一个bundle，所以我们需要对bundle代码进行分割，分割成多个js文件，这样子多个文件能并行加载，比加载一个文件更快
可以使用配置optimization对node_modules进行打包，如果想对node_modules其中的某个文件打包，可以使用dll技术
打包node_modules文件
optimization:{
splitChunks:{
chunks: 'all'
}
}
（4）懒加载/预加载
- 需要在代码分割的基础上，才能进行懒加载
（5）pwa （渐进式网络开发应用程序（离线可访问）npm i workbox-webpack-plugin）
（6）externals
module.exports = {
...
externals: {
//拒绝jQuery被打包进来
jquery: 'jQuery'
}
}
（7）dll
