Webpack理论与实践2

上期说到webpack插件，那我们这次来看一下 如何手写一个自定义插件，在这之前首先要大概了解插件的工作原理，这里引用Segmentfault上面的一篇帖子，感觉讲的比较透彻。

揭秘webpack插件的工作原理

插件编写

    插件的实现主要运用了webpack里面的一些钩子【生命周期】，最主要是的compiler对象和complication中包含的钩子，同时使用Tapable事件流机制，对webpack的钩子注册事件监听，然后在使用插件的时候，就会执行监听里面的回调。这里我们举一个对打包文件进行换行处理的插件例子。
    首先要分析的是，要在哪个时机来进行换行处理，webpack那么多钩子函数，怎么去选择，换行这个处理可能是编译流程的最后一道工序，那么我们可以让它在将要生成打包文件之前去执行就可以了。

emit: new AsyncSeriesHook(['compilation']), //在生成文件到output目录之前执行，回调参数： compilation

这个钩子的时机好像还蛮符合的，那我们用这个钩子来试下。

另外，由于webpack去运用插件原型上的apply方法去注册事件，那么我们换行插件必须是一个带apply方法的函数或者class

class HuanHang {
	apply(compiler) {
		compiler.hooks.emit.tap('HuanHangPlugin', compilation => {
			for(const name in compilation.assets) {
				console.log(compilation.assets[name]);
				const content = compilation.assets.source();
				const res = contents.replace(/\;/g, ';\n');  //这里只是简单做了字符串替换
				compilation.assets[name] = {
					source: () => res,
					size: () => res.length
				}
				console.log(compilation.assets[name].source());   //可以把结果打印出来看下
			}
		})
	}
}

这样一个自定义插件就完成了

webpack利用插件做优化的一些手段

问题一： 我们知道webpack一般是最终把所有文件进行编译，最终生成一个js文件，那如果我们模块特别多，代码量很大的话，那岂不是最后生成的js文件会特别特别大，导致页面加载非常耗时，针对这种情况，应该如何去优化呢？

Extract-text-webpack-plugin

这个插件就是可以提取css到单独的css文件的，这样可以适当减少bundle.js的大小，具体使用这里就不多介绍了，webpack官方文档里有很详细的介绍。

CommanChunkPlugin

公共代码提取，针对多个模块共用的代码，可以通过这个插件进行公共代码提取，从而使得bundle.js变小。

Tree Shaking

这个属于一种优化手段，针对我们项目里面的死代码【未使用的代码】，对其进行剔除，从而减少js代码
这种方式要求必须是未经过编译的ES6代码，因为ES6语法在导入导出上面是静态的，所以可以使得Webpack分析出哪些被依赖了，哪些没有被依赖。所以在使用时，必须关闭babel转义才可以。
另外，当webpack已经分析出来哪些模块被使用了，哪些未被使用时，还需要用UglifyJSPlugin进行优化。

按需加载

针对问题一，可以通过按需加载和分块的手段来进行优化，即把首次加载时不需要展示非本页面所需的代码，在下一步或者其他页面的时候再进行代码加载。webpack内置了对import(*)的支持，这种方式可以实现模块的按需加载和路由的按需加载。

Scope Hoisting

Scope Hoisting可以让打包出来的文件更小，运行更快，也叫“作用域提升”，它会将可以合并的模块合并在一起，同时要求必须采用ES6模块语法，原因类似Tree Shaking。Wepack内置了Scope Hoisting的插件-ModuleConcatenationPlugin。

问题二： 我们知道js是单线程的，那有没有可能让webpack打包时，实现并行打包呢？

ParallelUglifyPlugin-并行代码优化

一般我们在进行代码优化时，会使用UglifyJSPlugin插件进行代码压缩，但是可以利用多个子进程并行进行压缩，ParallelUglifyPlugin主要就是做这种工作，当存在很多个js文件需要压缩时，就会并行执行，从而提高压缩效率。

HappyPack

Webpack中，很重要的一部分核心内容是Loader对各式各样文件类型的加载，当文件数量或者类型很多时，loader只能一个一个的进行解析，那么Loader的加载就会比较耗时。HappyPack的原理是将loader加载文件的事情分到多个进程中并行地进行处理，从而减少打包时间。

以上是一些webpack优化插件及手段，不涉及具体的实现，只是简单介绍了用法/原理，欢迎大家一起讨论和学习。