Webpack 4 Optimization 配置详解与实战指南

Webpack 4 Optimization 配置概述

本文对 Webpack 4 中 optimization 配置项进行系统总结。

minimize 与 minimizer 配置

minimize 配置项解析

该选项默认为 true，主要作用是对 JavaScript 代码进行压缩处理。

minimizer 配置项解析

允许自定义 UglifyJsPlugin 及相关配置，默认的压缩插件为 uglifyjs-webpack-plugin。

//比如在构建的时候,希望新增css的压缩
minimizer:
 mode === "development"
  ? []
  : [
    new UglifyJsPlugin({
     cache: true,
     parallel: true,
     sourceMap: mode === "development"
    }),
    new OptimizeCSSAssetsPlugin()
   ]

runtimeChunk 运行时管理

runtimeChunk 配置项解析

默认为 false，此时与 runtime 相关的代码（包括各模块间的引用和加载逻辑）会被内嵌到每个 entry 中。

当设置为 true 时：对于每个 entry 会生成名为 runtime~${entrypoint.name} 的文件。

当设置为 'single' 时：会生成一个唯一的单独 runtime.js 文件，即 manifest。

当设置为 multiple 时：行为与 true 一致。若使用 name:{} 形式：可自定义 runtime 文件的 name。

noEmitOnErrors 错误处理

noEmitOnErrors 配置项解析

默认为 true，用于控制是否在编译发生错误时不生成资源文件。

namedModules 与 namedChunks 命名策略

namedModules 与 namedChunks 配置项解析

development 模式下默认都为 true，production 模式下默认为 false，用于选择是否给 module 和 chunk 赋予更有意义的名称。

当开启 nameModules:true 时，这里会显示路径信息。

当关闭 nameModules:false 时，直接采用索引自增方式。

namedChunks:true

namedChunks:false采用索引

moduleIds 与 chunk 配置

moduleIds 配置项解析

一般不建议配置 namedModules 和 namedChunks。针对 module 的配置，这里会取 hashed 值。

针对 chunk 的配置，特别是 异步代码 一般会采用 @vue-cli3 推荐的插件。

构建优化辅助选项

removeAvailableModules, removeEmptyChunks, mergeDuplicateChunks, flagIncludedChunks 配置项解析

这 4 个参数构建默认都是 true，主要用于构建优化，通常无需修改，其含义基本符合字面意思。

splitChunks 代码分割策略

splitChunks 配置项解析

主要根据不同的策略来分割打包出来的 bundle。默认配置如下：

1. chunks

async（默认）：

splitChunks:{
  chunks:'async'//分割异步打包的代码，
}

打包出 b 和 vue 两个 chunk。

all:

splitChunks:{
  chunks:'all',//同时分割同步和异步代码,推荐。
  cacheGroup:{//默认的规则不会打包,需要单独定义
   a: {
    test: /a\.js/,
    chunks: "all",
    name: "a",
    enforce: true
   }
  }
}

initial

splitChunks:{
  chunks:'initial'//也会同时打包同步和异步，但是异步内部的引入不再考虑，直接打包在一起，会将vue和b的内容直接打包成chunk,
  cacheGroup:{//默认的规则不会打包,需要单独定义
   a: {
    test: /a\.js/,
    chunks: "all",
    name: "a",
    enforce: true
   }
  }
}

2. name 分割的 js 名称，默认为 true，返回格式为 ${cacheGroup的key} ${automaticNameDelimiter} ${moduleName}，可以自定义。

3. minChunks 最小公用模块次数，默认为 1。

4. minSize, maxSize, maxAsyncRequests（按需加载时候最大的并行请求数）, maxInitialRequests（一个入口最大的并行请求数） 都为字面意思，一般不建议改。

5. cacheGroups 缓存策略，默认设置了分割 node_modules 和公用模块。内部的参数可以覆盖外部的参数。 test 正则匹配文件 priority 优先级 reuseExistingChunk 是否复用存在的 chunk

  cacheGroup:{
   a: {
    test: /a\.js/,//匹配规则
    minChunks:2,//重写公用chunks的次数
    chunks: "all",
    name: "a",//重写文件名称
    enforce: true //强制生成
   }
  }

6. automaticNameDelimiter 文件名称分隔符号 ~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。