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

Posted Web涛涛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初探webpack4--简单理解打包优化相关的知识,希望对你有一定的参考价值。

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‘]
              }

            ]
          })
        }

以上是关于初探webpack4--简单理解打包优化的主要内容,如果未能解决你的问题,请参考以下文章

webpack4.0打包的时候一些技巧

打包的一些简单优化

记一次webpack4+react+antd项目优化打包文件体积的过程

webpack4.x 使用

Webpack优化构建速度

前端玩转 webpack,使你的打包速度提升 90%