Webpack 性能优化方案

发表于 更新于 分类于 Waline：

webpack性能提升方案收集。

DllPlugin(2020.02.08)

我们在构建一个项目的过程中不可避免地会引入许多的第三方包，而这些第三方包在我们项目开发过程中不会有任何的变化，但是我们每次修改代码的时候去重新打包都会再次将这些代码分析一遍，非常影响效率。

那么有没有什么办法可以让这些第三方包只打包一次呢？

webpack官方就提供了一种解决方案。

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。

DllPlugin

这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

  • context (optional): manifest 文件中请求的上下文(context)(默认值为 webpack 的上下文(context))
  • name: 暴露出的 DLL 的函数名 (TemplatePaths: [hash] & [name] )
  • path: manifest json 文件的绝对路径 (输出文件)
1
new webpack.DllPlugin(options);

在给定的 path 路径下创建一个名为 manifest.json 的文件。 这个文件包含了从 require 和 import 的request到模块 id 的映射。 DLLReferencePlugin 也会用到这个文件。

这个插件与 output.library 的选项相结合可以暴露出 (也叫做放入全局域) dll 函数。

DllReferencePlugin

这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。

  • context: (绝对路径) manifest (或者是内容属性)中请求的上下文
  • manifest: 包含 content 和 name 的对象，或者在编译时(compilation)的一个用于加载的 JSON manifest 绝对路径
  • content (optional): 请求到模块 id 的映射 (默认值为 manifest.content)
  • name (optional): dll 暴露的地方的名称 (默认值为 manifest.name) (可参考 externals)
  • scope (optional): dll 中内容的前缀
  • sourceType (optional): dll 是如何暴露的 (libraryTarget)
1
new webpack.DllReferencePlugin(options);

通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 __webpack_require__ 函数来 require 他们

与 output.library 保持 name 的一致性。

模式(Modes)

这个插件支持两种模式，分别是作用域(scoped)和映射(mapped)。

作用域模式(Scoped Mode)

dll 中的内容可以在模块前缀下才能被引用，举例来说，令scope = "xyz"的话，这个 dll 中的名为 abc 的文件可以通过 require("xyz/abc") 来获取

作用域的用例

映射模式(Mapped Mode)

dll 中的内容被映射到了当前目录下。如果一个被 require 的文件符合 dll 中的某个文件(解析之后)，那么这个dll中的这个文件就会被使用。

由于这是在解析了 dll 中每个文件之后才发生的，相同的路径必须能够确保这个 dll bundle 的使用者(不一定是人，可指某些代码)有权限访问。 举例来说， 假如一个 dll bundle 中含有 loadash库 以及 文件abc， 那么 require("lodash") 和 require("./abc") 都不会被编译进主要的 bundle文件，而是会被 dll 所使用。

用法(Usage)

DllReferencePlugin 和 DLL插件DllPlugin 都是在_另外_的 webpack 设置中使用的。

webpack.vendor.config.js

1
2
3
4
5
new webpack.DllPlugin({
  context: __dirname,
  name: '[name]_[hash]',
  path: path.join(__dirname, 'manifest.json'),
});

webpack.app.config.js

1
2
3
4
5
6
7
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./manifest.json'),
  name: './my-dll.js',
  scope: 'xyz',
  sourceType: 'commonjs2'
});

示例

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var path = require("path");
var webpack = require("../../");
module.exports = {
	// mode: "development || "production",
	resolve: {
		extensions: [".js", ".jsx"]
	},
	entry: {
		alpha: ["./alpha", "./a", "module"],
		beta: ["./beta", "./b", "./c"]
	},
	output: {
		path: path.join(__dirname, "dist"),
		filename: "MyDll.[name].js",
		library: "[name]_[fullhash]"
	},
	plugins: [
		new webpack.DllPlugin({
			path: path.join(__dirname, "dist", "[name]-manifest.json"),
			name: "[name]_[fullhash]"
		})
	]
};

首先利用上述配置进行打包，会将entry中的模块进行打包，随后DllPlugin会将打包好的文件进行module id的映射，并将映射关系保存进manifest文件中

如根据上述配置，“./alpha”, “./a”, "module"三个包会被打包进 ./dist/MyDll.alpha.js中，同时这三个包的映射关系会被保存进 ./dist/alpha-manifest.json中。

同时打包好的文件会被暴露为output.library中规定的文件名被入口html引入。

而此时DllPlugin的name属性与libray是相同的，所以manifest中保存了这个library与三个模块之间的映射关系。

entry中的beta同理。

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var path = require("path");
var webpack = require("../../");
module.exports = {
	// mode: "development || "production",
	plugins: [
		new webpack.DllReferencePlugin({
			context: path.join(__dirname, "..", "dll"),
			manifest: require("../dll/dist/alpha-manifest.json") // eslint-disable-line
		}),
		new webpack.DllReferencePlugin({
			scope: "beta",
			manifest: require("../dll/dist/beta-manifest.json"), // eslint-disable-line
			extensions: [".js", ".jsx"]
		})
	]
};

此时再通过上述配置文件打包，当遇到了需要引入的模块时，就会先通过DllReferencePlugin插件就会去寻找前面打包好的manifest对应的模块，而不会去node_modules中去寻找，如果找不到才回去node_modules中寻找打包，这样就能有效提升第三方包的打包速度，只需要提前运行一次打包并生成dll，接下来的打包只需要去查看manifest就可以了。