前言

上一篇文章中已经把webpack的安装和部分性能优化的配置讲解了一遍，本章节主要会围绕webpack中编译时间的优化来配置。

编译时间优化

💡 extensions

指定extensions之后可以不用再require和import的时候加文件扩展名
查找的时候会一次尝试添加扩展名进行匹配

👉 在webpack配置文件中，使用resolve来解析打包文件

resolve: {
    extensions: ['.js', '.jsx', '.json']
}

👉 解析的时候，可以配置extensions扩展名。

配置数组中，会按照配置的优先顺序查找
比如我配置的就是优先查找.js文件，找不到的时候再去依次匹配后面的。

比如我们在index.js中引用外部js的时候，可以直接导入名称，而无需添加后缀。
在webpack配置项中我们已经对打包的文件做了扩展名的适配了。

💡 alias

配置别名可以加块webpack查找模块的速度。

👉 在项目中引用到bootstrap模块的时候，按规则来说是会去找到bootstrap模块中的main对应的配置文件，也就是一个js文件

❓ 如果我们想要在引用bootstrap模块的时候，能够找到它的css应该怎么写呢？可能有人会说直接通过绝对路径去node_modules文件夹中找，但是这样会不会太麻烦了，多个页面用到的话，岂不是要配置很多路径了。

👉 这时候就可以在webpack中通过alias别名的方式来配置。

// webpack配置文件顶部引入bootstrap模块路径
const bootstrap = path.join(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.css')

resolve: {
    // 通过别名的方式直接引用bootstrap
    alias: { bootstrap }
}

👉 由于我们引用的是css路径，所以需要单独配置一个loader（文件加载器）

 module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }
    ]
}

在webpack配置文件中通过module下面的rules来配置loader
配置loader的时候，通过test的正则表达式来校验css文件

💢 这里的bootstrap、styl-loader、css-loader都是单独安装的，就是为了测试alias的配置。

💡 modules

对于直接声明依赖名的模块，webpack会使用类似node.js一样的路径搜索node_modules目录。
如果我们可以确定项目中使用的所有第三方依赖模块都是在项目的根目录下面node_modules目录里面的话，是可以直接指定的。
如果是把第三个依赖模块放到了其他目录中，就可以使用modules来配置对应的目录。

👉 比如我们之前在inedx.js中引入了bootstrap模块

按照一般的查询方式，webpack会先去查找项目根目录下面的node_modules文件夹，如果没有的话，就会一直往上查找父目录，爷目录，祖先目录等。

👉 在项目目录之外去安装模块

比如这时候我去D盘下面的test目录中安装了一个lodash模块，如果想要在项目中引用的话，是不是需要写死一个固定的路径才行。

👉 这时候就可以在webpack中配置modules，去查找指定的目录文件了。

resolve: {
    modules: ['d:/test/node_modules', 'node_modules']
}

先去指定文件夹中查找，找不到再去项目根目录中的node_modules下去找。

💡 oneOf

在webpack配置项中的rules中的所有规则都会遍历一遍，如果使用oneOf的话，只要匹配到一个就退出执行rules余下的规则项。

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        },
        {
            test: /\.sass$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        }
    ]
}

在rules规则项中，我们经常会去匹配多种loader，比如css、less、sass等。
按照一般的执行顺序，会从上到下依次执行，直到rules所有规则项执行完。

module: {
    rules: [
        {
            oneOf: [
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'less-loader'
                    ]
                },
                {
                    test: /\.sass$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                }
            ]
        }
    ]
}

如果我们在rules规则项中使用oneOf包裹一层之后，当匹配的某一项就会跳出规则项，余下的规则也不会继续执行了。

💡 external

如果我们想引用一个库，但是又不想使用webpack打包，还不能影响我们在程序中以CMD、window、global全局等方式来使用的话，就可以配置external

👉 比如我们常用的jquery库，这个库是比较大的，如果使用webpack打包就会影响性能。

比如我们想在项目中引用jquery，但是又不想打包，那应该怎么办呢?

这时候我们就可以在src目录下新建一个html模板文件，在这个html中引用jquery的cdn路径

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

引入之后，我们就可以在index.js中使用jquery了

let $ = require('jquery')
console.log($)

而且我们还可以再全局中使用jquery

<body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        console.log(jQuery)
    </script>
</body>

其实这时候已经可以使用jquery了，但是还需要配置使用时不打包，所以就要用到external

👉 在webpack配置文件中配置jquery

externals: {
    jquery: 'jQuery'
}

👉 index.js中的这一句就表示window.jQuery，引用的jquery和externals中的key值一致。

let $ = require('jquery')

👉 运行项目会发现jquery已经属于外部命令了

💡 ignorePlugin

是用于忽略某些特定的模块，让webpack不把这些指定的模块打包进去

比如我们常用的处理时间的库：moment，安装之后会发现里面有很多语言类的文件，但是我们都不需要，我们只需要中文和英文，所以我们可以把里面的语言包给忽略掉，不进行打包。

👉 安装moment库

npm install moment --save

👉 安装完成之后在index.js中引入

👉 执行打包命令之后会发现，main.js打包出来的大小有600+KB

👉 而在打包出来的main.js文件中就会发现有很多moment库里面的不常用语言包也在里面

为了可以去掉不必要的语言包，我们可以使用ignorePlugin进行正则匹配之后忽略掉。

👉 引入webpack

const webpack = require('webpack')

👉 在plugins配置项中使用ignorePlugin插件

plugins: [
    new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/
    })
]

resourceRegExp：资源正则，匹配moment中的locale目录
contextRegExp：上下文正则，亦或是目录正则，匹配moment目录

👉 重新打包之后会发现main.js的大小只剩下100+KB了

总结

本篇文章主要是讲解webpack打包时对编译时间的优化，主要是讲解了一些常用的，还有一些以前常用的但是现在弃用的就没必要说明了。

优化项的配置不需要死记硬背，只需要知道怎么使用即可。

下一篇章会讲解编译体积的优化项配置，比如压缩JS、CSS、HTML、图片等。

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

webpack性能优化配置与实战（二）

前言