怎么做个人公众号,广州网站建设 乐云seo,一线互联网公司有哪些,北京国互网网站建设报价一、背景
随着我们的项目涉及到页面越来越多#xff0c;功能和业务代码也会随着越多#xff0c;相应的 webpack 的构建时间也会越来越久
构建时间与我们日常开发效率密切相关#xff0c;当我们本地开发启动 devServer 或者 build 的时候#xff0c;如果时间过长#xff…
一、背景
随着我们的项目涉及到页面越来越多功能和业务代码也会随着越多相应的 webpack 的构建时间也会越来越久
构建时间与我们日常开发效率密切相关当我们本地开发启动 devServer 或者 build 的时候如果时间过长会大大降低我们的工作效率
所以优化webpack 构建速度是十分重要的环节
二、如何优化
常见的提升构建速度的手段有如下
优化 loader 配置合理使用 resolve.extensions优化 resolve.modules优化 resolve.alias使用 DLLPlugin 插件使用 cache-loaderterser 启动多线程合理使用 sourceMap
优化loader配置
在使用loader时可以通过配置include、exclude、test属性来匹配文件接触include、exclude规定哪些匹配应用loader
如采用 ES6 的项目为例在配置 babel-loader 时可以这样
module.exports {module: {rules: [{// 如果项目源码中只有 js 文件就不要写成 /.jsx?$/提升正则表达式性能test: /.js$/,// babel-loader 支持缓存转换出的结果通过 cacheDirectory 选项开启use: [babel-loader?cacheDirectory],// 只对项目根目录下的 src 目录中的文件采用 babel-loaderinclude: path.resolve(__dirname, src),},]},
};合理使用 resolve.extensions
在开发中我们会有各种各样的模块依赖这些模块可能来自于自己编写的代码也可能来自第三方库 resolve可以帮助webpack从每个 require/import 语句中找到需要引入到合适的模块代码
通过resolve.extensions是解析到文件时自动添加拓展名默认情况如下
module.exports {...extensions:[.warm,.mjs,.js,.json]
}当我们引入文件的时候若没有文件后缀名则会根据数组内的值依次查找
当我们配置的时候则不要随便把所有后缀都写在里面这会调用多次文件的查找这样就会减慢打包速度
优化 resolve.modules
resolve.modules 用于配置 webpack 去哪些目录下寻找第三方模块。默认值为[node_modules]所以默认会从node_modules中查找文件 当安装的第三方模块都放在项目根目录下的 ./node_modules 目录下时所以可以指明存放第三方模块的绝对路径以减少寻找配置如下
module.exports {resolve: {// 使用绝对路径指明第三方模块存放的位置以减少搜索步骤// 其中 __dirname 表示当前工作目录也就是项目根目录modules: [path.resolve(__dirname, node_modules)]},
};优化 resolve.alias
alias给一些常用的路径起一个别名特别当我们的项目目录结构比较深的时候一个文件的路径可能是./../../的形式
通过配置alias以减少查找过程
module.exports {...resolve:{alias:{:path.resolve(__dirname,./src)}}
}使用 DLLPlugin 插件
DLL全称是 动态链接库是为软件在winodw种实现共享函数库的一种实现方式而Webpack也内置了DLL的功能为的就是可以共享不经常改变的代码抽成一个共享的库。这个库在之后的编译过程中会被引入到其他项目的代码中
使用步骤分成两部分
打包一个 DLL 库引入 DLL 库
打包一个 DLL 库
webpack内置了一个DllPlugin可以帮助我们打包一个DLL的库文件
module.exports {...plugins:[new webpack.DllPlugin({name:dll_[name],path:path.resolve(__dirname,./dll/[name].mainfest.json)})]
}引入 DLL 库
使用 webpack 自带的 DllReferencePlugin 插件对 mainfest.json 映射文件进行分析获取要使用的DLL库
然后再通过AddAssetHtmlPlugin插件将我们打包的DLL库引入到Html模块中
module.exports {...new webpack.DllReferencePlugin({context:path.resolve(__dirname,./dll/dll_react.js),mainfest:path.resolve(__dirname,./dll/react.mainfest.json)}),new AddAssetHtmlPlugin({outputPath:./auto,filepath:path.resolve(__dirname,./dll/dll_react.js)})
}使用 cache-loader
在一些性能开销较大的 loader 之前添加 cache-loader以将结果缓存到磁盘里显著提升二次构建速度
保存和读取这些缓存文件会有一些时间开销所以请只对性能开销较大的 loader 使用此 loader
module.exports {module: {rules: [{test: /.ext$/,use: [cache-loader, ...loaders],include: path.resolve(src),},],},
};terser 启动多线程
使用多进程并行运行来提高构建速度
module.exports {optimization: {minimizer: [new TerserPlugin({parallel: true,}),],},
};合理使用 sourceMap
打包生成 sourceMap 的时候如果信息越详细打包速度就会越慢。对应属性取值如下所示 三、总结
可以看到优化webpack构建的方式有很多主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手
参考文献
https://github.com/ly2011/blog/issues/44https://xie.infoq.cn/article/541418eb82a674741a0ad8865https://zhuanlan.zhihu.com/p/139498741https://vue3js.cn/interview
