初探webpack4--简单理解打包优化

Posted 2020-11-26 Web涛涛

webpack打包优化技巧
　　优化打包速度:
　　影响打包速度: 文件多、依赖多

　　1、减少文件搜索范围
　　　　(1) 优化resolve.extensions配置
　　　　　　在导入语句没带文件后缀时，webpack会自动带上后去尝试询问文件是否存在在配置resolve.extensions时你需要要遵守一下几点,以做到尽可能的优化构建性能:后缀尝试列表要尽可能的小,不要把项目中不可能存在的情况写到后缀尝试列表中频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程在源码中写导入语句时，尽可能的带上后缀，避免寻找过程
　　　　(2)优化resolve.modules配置
　　　　　　resolve.modules 用于配置webpack去哪些目录下寻找第三方模块
　　　　　　resolve.modules 默认值是[‘node_modules‘]，会采用向上递归搜索的方式查找 所以直接设置 绝对路径可以减少搜索步骤

　　　　　　function resolve (dir) {
　　　　　　　　return path.join(__dirname, ‘..‘, dir)
　　　　　　}

　　　　　　resolve: {
　　　　　　　　modules: {
　　　　　　　　　　resolve(‘node_modules‘)
　　　　　　　　}
　　　　　　}
　　　　(3)优化resolve.alias 配置
　　　　　　resolve.alias配置项通过别名来把原导入路径映射成一个新的导入路径
　　　　　　使用好的别名可以减少递归操作
　　　　(4)缩小文件匹配范围
　　　　　　Include: 需要处理的文件的位置
　　　　　　EXclude: 排除不需要处理的文件的位置

　　2、设置noParse
　　　　　　modules 中的一个参数
　　　　　　　　防止webpack解析哪些任何与给定正则表达式相匹配的文件，忽略的文件中不应该含有的import require define的调用,或任何其他导入机制,忽略大型的library可以提高构建性能　　　　　　

　　　　　　　　eg: modules: {

　　　　　　　　　　noParse:/jquery|lodash/

　　　　　　　　}
　　　　　　给babel-loader设置缓存
　　　　　　　　babel-loader提供了cacheDirectory特定选项(默认false)，设置时给定目录将用于缓存加载器的结果
　　　　　　　　use: {
　　　　　　　　　　loader: ‘babel-loader?cacheDirectory=true‘
　　　　　　　　}
　　3、使用happyPack
　　　　基本原理:在webpack构建过程中,我们需要使用loader对js,css,图片,字体等文件做转换操作,并且转换的文件数据量也是非常大的,且这些转换操作不能并发处理文件,而是需要一个个文件进行处理happyPack的基本原理是将这部分任务分解到多个子进程中并行处理,子进程处理完成后把结果发送到主进程中,从而减少总的构建时间
　　　　(1)安装:
　　　　　　npm install happypack --save-dev
　　　　(2)配置webpack.common.config.js
　　　　　　引入happyPack
　　　　　　　　const HappPack = require(‘happypack‘)
　　　　　　Rules配置:
　　　　　　　　{
　　　　　　　　　　test: ‘/.js$/‘,
　　　　　　　　　　exclude: ‘node_module‘,
　　　　　　　　　　loader: ‘happypack/loader?id=happyBabel‘
　　　　　　　　}
　　　　　　plugins配置
　　　　　　　　plugins:{
　　　　　　　　　　new HappyPack({
　　　　　　　　　　　　id: ‘happyBabel‘,
　　　　　　　　　　　　loaders: [
　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　loader: [‘babel-loader?cacheDirectory=true‘]
　　　　　　　　　　　　　　}

　　　　　　　　　　　　]
　　　　　　　　　　})
　　　　　　　　}