Webpack高级

一、webpack高级介绍

所谓高级配置其实就是进行webpack优化，让我们代码在编译/运行时性能更好
我们会从以下角度来进行优化：
        1 提升开发体验
        2 提升打包构建速度
        3 减少代码体积
        4 优化代码运行性能

二、提升开发体验

2.1、SourceMap是什么

SourceMap(源代码映射)是一个用来生成源代码与构建代码一一映射的文件的方案
它会生成一个xxx.map文件，里面包含源代码和构建后代码每一行、每一列的映射关系，当构建后代码出错了
会通过xxx.map文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错
位置，帮助我们更快的找到错误根源

2.2、怎么用

通过查看webpack DevTool文档可知，SourceMap的值有很多情况
但实际开发时我们只需要关注两种情况即可
开发模式：cheap-module-source-map
    优点：打包编译速度快，只包含行映射
    缺点：没有列映射
module.exports = {
    // 其他省略
    mode:"development",
    devtool:"cheap-module-source-map",
}
生产模式：source-map
    优点：包含行/列映射
    缺点：打包编译速度更慢
module.exports = {
    // 其他省略
    mode:"production",
    devtool:"source-map",
}

三、提升打包构建速度

3.1、HotModuleReplacement是什么

HotModuleReplacement(HMR/热模块替换)：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面

3.2、怎么用

基本配置：
// webpack.config.js
module.exports = {
    // 其他省略
    devServer:{
        host:"localhost",   // 启动服务器域名
        port:"3000",    // 启动服务器端口号
        open:true,  // 是否自动打开浏览器
        hot:true,   // 开启HMR功能(只能用于开发环境，生产环境不需要了)
    }
}
此时CSS样式经过style-loader处理，已经具备HMR功能了，但是js还不行
js配置
import count from "./js/count"
import sum from "./js/sum"
const res1 = count(2,1)
console.log(res1)
const res2 = sum(1, 2, 3, 4,5)
console.log(res2)
// 判断是否支持HMR功能
if (module.hot) {
    module.hot.accept(".js/count.js",function(count){
        const res1 = count(2,1);
        console.log(res1) ;
    });
    module.hot.accept(".js/sum.js",function(sum){
        const res2 = sum(1, 2, 3, 4,5);
        console.log(res2);
    });
}
上面这样写会很麻烦，所以实际开发我们会使用其他loader来解决
比如：vue-loader,react-hot-loader

3.3、OneOf是什么

打包时每个文件都会经过loader处理，虽然因为test正则原因实际没有处理上，但是都要过一遍，比较慢
OneOf顾名思义就是只能匹配上一个loader，剩下的就不匹配了

3.4、怎么用

module:{
    rules:[
        {
            oneOf:[
                {
                    // 用来匹配.css结尾的文件
                    test:/\.css$/,
                    // use数组里面loader执行顺序是从左到右
                    use:["style-loader","css-loader"],
                }
                ...
            ]
        }
    ]
}

3.5、Include/Exclude是什么

include：包含，只处理xxx文件
exclude：排除，除了xxx文件以外其他文件都处理

3.6、怎么用

{
    test:/\.js$/,
    // exclude:"node_modules", // 排除node_modules下的文件，其他文件都处理
    include:path.resolve(__dirname,"../src"),   // 只处理src下的文件，其他文件不处理
    loader:"babel-loader",
}

3.7、Cache是什么

对Eslint检查和Babel编译结果进行缓存

3.8、怎么用

{
    test:/\.js$/,
    // exclude:"node_modules", // 排除node_modules下的文件，其他文件都处理
    include:path.resolve(__dirname,"../src"),   // 只处理src下的文件，其他文件不处理
    loader:"babel-loader",
    options:{
        cacheDirectory:true,    // 开启babel缓存
        cacheCompression:false, // 关闭缓存文件压缩
    }
}

3.9、Thead是什么

多进程打包：开启电脑的多个进程同时干一件事，速度更快
需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就大约为600ms左右

3.10、怎么用

我们启动进程的数量就是我们CPU的核数
1 如何获取CPU的核数，因为每个电脑都不一样
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
2 下载包
npm i thread-loader -D
3 使用
const TerserWebpackPlugin = require("terser-webpack-plugin")
{
    test:/\.js$/,
    // exclude:"node_modules", // 排除node_modules下的文件，其他文件都处理
    include:path.resolve(__dirname,"../src"),   // 只处理src下的文件，其他文件不处理
    use:[
        {
            loader:"thread-loader", // 开启多进程
            options:{works:threads, // 进程数量},
        },
        {
            loader:"babel-loader",
            options:{
                cacheDirectory:true,    // 开启babel缓存
                cacheCompression:false, // 关闭缓存文件压缩
            },
        }
    ]
},
plugins:[
    new ESLintWebpackPlugin({threads,  // 开启多进程和设置进程数量})
    // new TerserWebpackPlugin({
    //     parallel:threads,
    // })
],
optimization:{
    // 压缩的操作
    minimizer:[
        // 压缩css
        new CssMinimizerPlugin(),
        // 压缩js
        new TerserWebpackPlugin({
            parallel:threads,   // 开启多进程和设置进程数量
        })
    ]
}

四、减少代码体积

4.1、Tree Shaking是什么

Tree Shaking是一个术语，通常用于描述移除JavaScript中的没有使用上的代码
注意：它依赖ES Module

4.2、怎么用

webpack已经默认开启了这个功能，无需其他配置

4.3、Babel是什么

@babel/plugin-transform-runtime：禁用了Babel自动对每个文件的runtime注入，而是引入
@babel/plugin-transform-runtime并且使用所有辅助代码从这里引用

4.4、怎么用

1 下载包
    npm i @babel/plugin-transform-runtime -D
2 配置
    loader:"babel-loader",
    options:{
        cacheDirectory:true,    // 开启babel缓存
        cacheCompression:false, // 关闭缓存文件压缩
        plugins:["@babel/plugin-transform-runtime"],    // 减少代码体积
    },

4.5、Image Minimizer是什么

image-minimizer-webpack-plugin：用来压缩图片的插件

4.6、怎么用

1 下载包
    npm i image-minimizer-webpack-plugin imagemin -D
    还有剩下包需要下载，有两种模式：
    无损压缩：
    npm install imagemin-gifsicle imagemin-jpegtan imagemin-optipng imagemin-svgo -D
    有损压缩：
    npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
2 配置：无损压缩
    const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin")
    // 压缩图片
    new ImageMinimizerPlugin({
        minimizer:{
            implementation:ImageMinimizerPlugin.imageminGenerate,
            options:{
                plugins:[
                    ["gifsicle",{interlaced:true}],
                    ["jpegtran",{progressive}],
                    ["optipng",{optimizationLevel:5}],
                    [
                        "svgo",
                        {
                            plugins:[
                                "preset-default",
                                "prefixIds",
                                {
                                    name:"sortAttrs",
                                    params:{xmInsOrder:"alphabetical",},
                                }
                            ]
                        }
                    ]
                ]
            }
        }
    })
3 打包时会出现错误：
    我们需要安装两个文件到node_modules中才能解决
    jpegtran.exe(jpegtran官网下载)
    需要复制到node_modules/jpegtran-bin/vendor下面
    optipng.exe(OptiPNG官网下载)
    需要复制到node_modules/jpegtran-bin/vendor下面

五、总结

我们从4个角度对webpack和代码进行了优化
1 提升开发体验
    使用Source Map让开发或上线时代码报错能有更加精准的错误提示
2 提升webpack提升打包构建速度
    使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快
    使用OneOf让资源文件一旦被loader处理了，就不会继续遍历了，打包速度更快
    使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快
    使用Cache对eslint和babel处理的结果进行缓存，让第二次打包速度更快
    使用Thead多进程处理eslint和babel任务，速度更快(需要注意的是，进程启动通信都有开销的，要在比较多代码处理的使用才有效果)
3 减少代码体积
    使用Tree Shaking剔除了没有使用的多余代码，让代码体积更小
    使用@babel/plugin-transform-runtime插件对babel进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小
    使用Image Minimizer对项目中图片进行压缩、体积更小，请求速度更快，(需要注意的是，如果项目中图片都是在线链接，那么就不需要了，
    本地项目静态图片才需要进行压缩)
4 优化代码运行性能
    使用Code Split对代码进行分割成多个js文件，从而使单个文件体积更小，并加载js速度更快，平通过import动态导入语法进行按需加载
    从而达到需要使用时才加载该资源，不用时不加载资源
    使用Preload/Prefetch对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好
    使用Network Cache能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好
    使用Core-js对js进行兼容性处理，让我们代码能运行在低版本浏览器
    使用PWA能让代码离线也能访问，从而提升用户体验