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

2022-10-08 186

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

QCK(N4)4MTM$T6PN2COT5RA.png

前言

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

编译时间优化

💡 extensions

指定extensions之后可以不用再require和import的时候加文件扩展名

查找的时候会一次尝试添加扩展名进行匹配

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

resolve: {
    extensions: ['.js', '.jsx', '.json']
}
复制代码

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

配置数组中，会按照配置的优先顺序查找

比如我配置的就是优先查找.js文件，找不到的时候再去依次匹配后面的。

7J)94[}`](183`E7$(YG7]7.png

比如我们在index.js中引用外部js的时候，可以直接导入名称，而无需添加后缀。

在webpack配置项中我们已经对打包的文件做了扩展名的适配了。

💡 alias

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

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

5SE11O85BI9Z}QZOV66B~)R.png

❓ 如果我们想要在引用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模块

Z(~1PS`Z5%~P1%A@65X(JL5.png

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

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

64HB0$IYQOEBW~_W@9~JI@K.png

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

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

resolve: {
    modules: ['d:/test/node_modules', 'node_modules']
}
复制代码

`8UL@]L28]7]DX[0F][SBYJ.png

先去指定文件夹中查找，找不到再去项目根目录中的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打包就会影响性能。

9WOKE57S7F05(LI8ET510QB.png

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

N]WE65EG{8H8Q]4B6VEPO12.png

这时候我们就可以在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已经属于外部命令了

A])[][IB0XVHI[]AL(JQH43.png

💡 ignorePlugin

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

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

👉 安装moment库

npm install moment --save
复制代码

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

{N)L}5U{8QPRZTX4CADH~91.png

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

W7_H7M6}W}$[D0PZIHOVAVS.png

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

9S]@CDS$NS4MHK`I8FRHTET.png

为了可以去掉不必要的语言包，我们可以使用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了

1K~144RQ@[VW0{@YDHDL}DU.png

总结

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

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

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

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

前言

编译时间优化

💡 extensions

💡 alias

💡 modules

💡 oneOf

💡 external

💡 ignorePlugin

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景