12-webpack性能优化（重点、面试点）

webpack性能优化:
开发环境性能优化：
优化打包构建速度、优化代码调试
生产环境性能优化
优化打包构建速度、优化代码运行的性能
==========================开发环境构建速度提升=======================
HMR：hot-module-replacement 热模块替换、模块热替换
作用：一个模块发生变换，只会重新打包这一个模块（而不是打包所有），极大的提高构建速度
3种文件：
样式文件：可以使用HMR功能，因为style-loader内部实现了HMR功能，所以开发环境用style-loader
js文件：默认不能使用HMR功能->需要修改代码，添加支持HMR功能的代码
HMR对js的处理，只能处理非入口js文件。入口js文件一旦更改，所有都会重新加载
html文件：默认不能使用HMR功能，html文件不能热更新了
解决：将entry变成数组，放入html entry:['./src/js/index.js','./src/index.html'],
html只有1个文件，因此不用HMR功能

目前每一个模块更改，所有的模块都会重新打包。如果想只打包更改的那个模块，开发环境使用HMR

    devServer:{
        contentBase:resolve(__dirname,"build"),
        port:3000,
        compress:true,
        open:true,
        //开启HMR功能 devServer上支持了HMR
        //当更改了webpack配置后，新配置要想生效，必须重启webpack服务
        hot:true
    }

=======================开发环境调试代码============================
source-map：提供一种源代码到构建后代码的映射的技术（如果构建后代码出错了，通过映射关系找到源代码错误）
在开发环境中

    devServer:{
        contentBase:resolve(__dirname,"build"),
        port:3000,
        compress:true,
        open:true,
        //开启HMR功能 devServer上支持了HMR
        //当更改了webpack配置后，新配置要想生效，必须重启webpack服务
        hot:true
    },
    devtool:'source-map'

输入命令webpack，会输出一个.map的文件
source-map有很多配置,source-map是最基本的配置
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map]
source-map
外部
错误代码的准确信息和源代码的错误位置
inline-source-map
内联
错误代码的准确信息和源代码的错误位置
hidden-source-map （为了隐藏源代码，只隐藏源代码）
外部
错误代码错误原因，但不能追踪到源代码，能找到构建后错误代码的位置
eval-source-map
内联(sourceURL，每一个文件都生成对应的source-map)
错误代码的准确信息和源代码的错误位置（对应文件多了个hash值）

image.png

内联和外部的区别是：1、外部生成了文件，内联没有 2、内联构建速度更快
nosources-source-map （为了隐藏源代码）
外部
错误代码的准确信息，但是没有任何源代码，全部隐藏
cheap-source-map
外部
错误代码的准确信息和源代码的错误位置
只能精确到行，不能到列
cheap-module-source-map
外部
错误代码的准确信息和源代码的错误位置
只能精确到行，不能到列
module会将loader的source-map加入进来

image.png

分环境使用source-map
开发环境要求：速度快一点，调试更友好
建议eval-cheap-source-map / eval-cheap-module-source-map
生产环境要求：代码要不要隐藏？调试要不要更友好
内联会让体积变很大，生产环境不用内联
hidden-source-map
nosources-source-map
建议source-map / cheap-module-source-map

快：eval更快
eval>inline>cheap>...
eval-cheap-source-map 最快 > eval-source-map
调试友好：
source-map 最友好> cheap-module-source-map >cheap-source-map