webpack高级配置与优化详解(5)

1、noParse: 该配置是作为 module 的一个属性值，即不解析某些模块，所谓不解析，就是不去分析某个模块中的依赖关系，即不去管某个文件是否 import(依赖)了某个文件，对于一些独立的库，比如 jquery，其根本不存在依赖关系，jquery 不会去引入其他的库(要根据自己对某个模块的了解去判断是否要解析该模块)，所以我们可以让 webpack 不去解析 jquery 的依赖关系，提高打包速度，如:

module.exports = { module: { noParse:/jquery/,//不去解析jquery中的依赖库 } }

noParse 是 module 配置中的一个属性，其属性值为一个正则表达式，填入不被解析的模块名称。

为了更清楚的展示 noParse 的作用，假设我们在入口文件 index.js 中引入 bar.js 模块，同时这个 bar.js 模块中也引入了 foo.js 模块，foo.js 不再依赖其他模块了，那么在不使用 noParse 的情况下，webpack 打包的时候，会先去分析 index.js 模块，发现其引入了 bar.js 模块，然后接着分析 bar.js 模块，发现其引入了 foo.js 模块，接着分析 foo.js 模块。

Entrypoint index = index.js [./src/bar.js] 55 bytes {index} [built] [./src/foo.js] 21 bytes {index} [built] [./src/index.js] 81 bytes {index} [built]

而此时如果使用了 noParse: /bar/，那么 webpack 打包的时候，会先去分析 index.js 模块，发现其引入了 bar.js 模块，但是由于 noParse 的作用，将不再继续解析 bar.js 模块了，即不会去分析 bar.js 中引入的 foo.js 模块了。

Entrypoint index = index.js [./src/bar.js] 55 bytes {index} [built] [./src/index.js] 81 bytes {index} [built]

2、exclude: 在 loader 中使用 exclude 排除对某些目录中的文件处理，即引入指定目录下的文件时候，不使用对应的 loader 进行处理，exclude 是 loader 配置中的一个属性，属性值为正则表达式，如:

module.exports = { module: { rules: [ { test: /.js$/, use: [ { loader: "babel-loader", options: { presets: ["@babel/preset-env"], plugins: ["@babel/plugin-transform-runtime"] } } ], exclude: /node_modules/ } ] } }

3、使用 IgnorePlugin 来忽略某个模块中某些目录中的模块引用，比如在引入某个模块的时候，该模块会引入大量的语言包，而我们不会用到那么多语言包，如果都打包进项目中，那么就会影响打包速度和最终包的大小，然后再引入需要使用的语言包即可，如:

项目根目录下有一个 time 包，其中有一个 lang 包，lang 包中包含了各种语言输出对应时间的 js 文件，time 包下的 index.js 会引入 lang 包下所有的 js 文件，那么当我们引入 time 模块的时候，就会将 lang 包下的所有 js 文件都打包进去，添加如下配置:

const webpack = require("webpack"); module.exports = { plugins: [ new webpack.IgnorePlugin(/lang/, /time/) ] }

引入 time 模块的时候，如果 time 模块中引入了其中的 lang 模块中的内容，那么就忽略掉，即不引入 lang 模块中的内容，需要注意的是，这 /time/ 只是匹配文件夹和 time 模块的具体目录位置无关，即只要是引入了目录名为 time 中的内容就会生效。

4、使用 HappyPack：由于在打包过程中有大量的文件需要交个 loader 进行处理，包括解析和转换等操作，而由于 js 是单线程的，所以这些文件只能一个一个地处理，而 HappyPack 的工作原理就是充分发挥 CPU 的多核功能，将任务分解给多个子进程去并发执行，子进程处理完后再将结果发送给主进程，happypack 主要起到一个任务劫持的作用，在创建 HappyPack 实例的时候要传入对应文件的 loader，即 use 部分，loader 配置中将使用经过 HappyPack 包装后的 loader 进行处理，如:

const HappyPack = require("happypack"); // 安装并引入happypack模块 module.exports = { plugins: [ new HappyPack({ // 这里对处理css文件的loader进行包装 id: "css",// 之前的loader根据具体的id进行引入 use: ["style-loader","css-loader"], threads: 5 // 设置开启的进程数 }) ], module: { rules: [ { test: /.css$/, // 匹配以.css结尾的文件 use: ["happypack/loader?id=css"] //根据happypack实例中配置的id引入包装后的laoder，这里的happyPack的h可以大写也可以小写 } ] } }

webpack 要打包的文件非常多的时候才需要使用 happypack 进行优化，因为开启多进程也是需要耗时间的，所以文件少的时候，使用 happypack 返回更耗时

5、抽离公共模块: 对于多入口情况，如果某个或某些模块，被两个以上文件所依赖，那么可以将这个模块单独抽离出来，不需要将这些公共的代码都打包进每个输出文件中，这样会造成代码的重复和流量的浪费，即如果有两个入口文件 index.js 和 other.js，它们都依赖了 foo.js，那么如果不抽离公共模块，那么 foo.js 中的代码都会打包进最终输出的 index.js 和 other.js 中去，即有两份 foo.js 了。抽离公共模块也很简单，直接在 optimization 中配置即可，如:

module.exports = { splitChunks: { // 分割代码块，即抽离公共模块 cacheGroups: { // 缓存组 common: { // 组名为common可自定义 chunks: "initial", minSize: 0, // 文件大小为0字节以上才抽离 minChunks: 2, // 被引用过两次才抽离 name: "common/foo", // 定义抽离出的文件的名称 } } } }

（编辑：ASP站长网）