Webpack——打包时间优化

引言

其实，相信很多只是从事快速应用开发的同学，对于 Webpack打包优化方面可能是一知半解（我深有感触…）。但是，作为一名从事编程的人，我一直推崇的就是用编程高效、快速解决一些问题。因为，如果只是解决问题，我想这不是我想要的，就比如只会迭代不会递归，以及还停留在 console.log调试代码等等。

当然，人总是从未知向知一点到知一些到构建完整的知识体系过渡，只要坚持，未知终将变为已知。那么，回到今天的正题，如何用Webpack进行一些打包的优化？

Webpack打包优化分为很多个方面，例如打包时间的优化、打包后文件体积的优化、以及如何和浏览器缓存（例如 ETag）做一些配合等等。所以，接下来我打算针对每一个方面，尽我所能地对应写一篇博客。今天，就从打包时间的优化开始！

一、resolve

---

resolve.modules

配置第三方模块对应的路径，即针对于代码中import from 'react'之类的对应 from 后面的字符串，即不是绝对路径，又不是相对路径时命中的逻辑。

resolve: {
	modules: [
		resolve('node_modules') // 指定第三方模块去 node_modules 中查找
	]
}

resolve.alias

针对特定的路径匹配（可以理解为指定）到对应已设好的目录，通常我们会用来指定自定义的组件文件夹。

resolve: {
	alias: [
		'component': resolve('src/component')
	]
}

二、module

---

noParse

忽略掉对一些文件的解析，例如 Jquery之类的。

module: {
	noParse: /Jquery/
}

loader优化

主要是用好一些 queryparams以及精确地指定需要使用和不使用 loader的地方，即 include和 exclude，例如对于 babel-loader而言：

modulde: {
	rules: [
		{
			test: /\.js$/,
			loader: 'babel-loader?cacheDirectory=true', // 缓存解析过的文件
			include: resolve('src'), 
			exclude: /node_modules/
		}
	]
}

三、plugins

---

webpack-parallel-uglify-plugin

主要是针对于代码压缩方面的优化，当然这是相对于Webpack.optimize.UglifyJsPlugin而言，因为 Webpack自带的 UglifyJsPlugin只能同步压缩代码，而webpack-parallel-uglify-plugin可以实现并行压缩代码的效果，这样一来就很好地利用了 CPU，从而提高压缩速度。

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

new ParallelUglifyPlugin({
	parallel: true, // 开启并行压缩 默认线程=cup-1
	cache: path.resolve(__dirname, 'dist'),
	uglifyOptions: {
		output: {
		  comments: false
		},
		compress: {
		  drop_debugger: true,
		  drop_console: true
		},
		warnings: false
	}
}),

happypack

在Webpack压缩的过程中，很重要的一个过程就是babel解析转化代码的过程，所以优化这个过程，在一定程度上也可以提高我们的打包速度。同样地，由于Webpack整个打包地过程是同步进行的，而happypack则可以实现多线程并行打包，它通常用于配合loader一起使用，例如它和babel-loader一起使用：

const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

module: {
	rules: [
		{
			test: /\.js$/,
			loader: isProd ? 'happypack/loader?id=happybabel':'babel-loader' // 需要区分生产和开发环境
			include: [resolve('src')],
			exclude: /node_modules/,
		}
	]
},
plugins: isProd ? [
	new HappyPack({	
        id: 'happyBabel',
        loaders: [{
          loader: 'babel-loader?cacheDirectory=true'
        }],
        threadPool: happyThreadPool,
        verbose: true // 允许 HappyPack 输出日志
    })
]:[]