本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号。一、背景随着我们的项目涉及的页面越来越多，随之而来的功能和业务代码也会越来越多，相应的webpack的搭建时间也会越来越长。构建时间与我们日常的开发效率息息相关。当我们本地开发启动devServer或者build时，如果时间过长，我们的工作效率会大大降低。因此，优化webpack构建速度是一个非常重要的环节。2.如何优化提高构建速度的常用手段如下：优化loader配置合理使用resolve.extensions优化resolve.modules优化resolve.alias使用DLLPlugin插件使用cache-loaderterser启动multi-threading合理使用sourceMap优化loader配置在使用loader时，可以通过配置include、exclude、test属性来匹配文件，联系include、Exclude指定使用哪些匹配的应用加载器。例如，使用ES6项目。配置babel-loader时，可以这样：module.exports={module:{rules:[{//如果项目源码中只有js文件，不要写/\.jsx?$/，提高正则表达式性能测试：/\.js$/,//babel-loader支持缓存转换后的结果，通过cacheDirectory选项开启use:['babel-loader?cacheDirectory'],//只对其中的文件使用babel-loaderinclude项目根目录下的src目录：path.resolve(__dirname,'src'),},]},};合理使用resolve.extensions在开发中我们会有各种Module依赖，这些Module可能来自于自己写的代码，也可能来自于第三方库，resolve可以帮助webpack找到合适的需要引入的模块代码文件通过resolve.extensions从每个require/import语句中自动添加扩展名，默认如下：module.exports={...extensions:[".warm",".mjs",".js",".json"]}当我们导入一个文件时，如果没有文件后缀名，就会按照数组中的值依次查找。我们在配置的时候，不要把所有的后缀都写在里面，这样会多次调用这个文件。搜索，会减慢打包速度优化resolve.modulesresolve.modules用于配置webpack去哪些目录寻找第三方模块默认值为['node_modules']，所以默认会从node_modules中搜索文件当安装第三方模块时，都放在项目根目录下的./node_modules目录下，可以指定绝对路径存放第三方模块，减少查找。配置如下：module.exports={resolve:{//使用绝对路径指定第三方模块的存放位置，减少查找步骤//其中__dirname代表当前工作目录，即项目根目录目录模块：[path.resolve(__dirname,'node_modules')]},};优化resolve.aliasalias为一些常用的路径创建别名，尤其是当我们的项目目录结构比较深时，一个文件的路径可能是./../../的形式，通过配置alias减少查找过程module.exports={...resolve:{alias:{"@":path.resolve(__dirname,'./src')}}}使用DLLPluginDLL的全称是动态链接库，是一个实现winodw中软件实现共享函数库的方法，而Webpack也内置了DLL的函数，这样就可以共享了，把不经常改动的代码拉到一个共享库中。这个库会在后续的编译过程中导入到其他项目的代码中。步骤分为两部分：打包一个DLL库导入一个DLL库打包一个DLL库webpack内置了一个DllPlugin可以帮助我们打包一个DLL库文件module.exports={...plugins:[newwebpack.DllPlugin({name:'dll_[name]',path:path.resolve(__dirname,"./dll/[name].mainfest.json")})]}导入DLL库使用自带的DllReferencePlugin插件webpack解析mainfest.json映射文件，获取要使用的DLL库，然后通过AddAssetHtmlPlugin插件module.exports={...newwebpack.DllReferencePlugin({context:path.resolve(__dirname,"./dll/dll_react.js"),mainfest:path.resolve(__dirname,"./dll/react.mainfest.json")}),newAddAssetHtmlPlugin({outputPath:"./auto",filepath:path.resolve(__dirname,"./dll/dll_react.js")})}使用cache-loader在一些性能开销大的loader之前添加cache-loader，将结果Cache到磁盘，显着提高体现了二次建设的速度。保存和读取这些缓存文件会有一些时间开销，所以请使用这个加载器module.exports={module:{rules:[{test:/\.ext$/,use:['cache-loader',...loaders],include:path.resolve('src'),},],},};terser开启多线程，使用多个进程并行运行来提高构建速度module.exports={optimization:{minimizer:[newTerserPlugin({parallel:true,}),],},};正确使用sourceMap打包生成sourceMap时，信息越详细，打包速度越慢。对应的属性值如下：3.总结可以看出，优化webpack构建的方式有很多，主要从优化搜索时间、减少文件搜索范围、减少不必要的编译等方面。参考资料https://github.com/ly2011/blog/issues/44https://xie.infoq.cn/article/541418eb82a674741a0ad8865https://zhuanlan.zhihu.com/p/139498741https://vue3js.cn/interview
