如何让webpack打包的速度提高50%？

随着前端应用包含的模块数量日益增加，代码打包的耗时也愈来愈长。公司不少项目打包耗时超过了10秒，对于通常人来讲超过10秒的等待是比较难受的，虽而后续增量编辑的速度很快。因而我想结合实际开发环境提高一下首次打包的速度。

1. 实际开发环境

我碰到大多数处于维护状态的网站都有一下几个特性：

• 模块数量庞大
• 模块中主要分为js模块和css模块，而且less模块最后使用extract-text-webpack-plugin打包出单独的css文件
• webpack入口文件包含了js和less，因此每次打包都须要处理js和less模块
• 许多需求只涉及到js模块的修改，并不涉及样式修改。反之亦然。

2. 优化思路

既然许多状况下编译less模块不是必须的，那在这些状况下单独编译js模块就能大幅提高webpack的性能。毕竟less的编译、以及css的抽出都很是消耗时间。

3. 优化步骤

优化包含如下两步：

• 区分编译目标，单独编译js? 仍是单独编辑css？ 仍是js+css?
• 入口文件分离js和css

3.1 区分编译目标

这一步比较简单，咱们须要使用cross-env这个插件，例以下面两条编译命令区分了编译js和编译js+css。

{
	"scripts": {
	    "build:js": "cross-env ctarget=all webpack",
	    "biuld:js+css": "cross-env ctarget=js webpack"
  }
}
复制代码

这样咱们就能够在webpack配置文件中经过process.env.ctarget区分当前编译目标了。

3.2 分离js和css

这一步须要经过webpack的loader来实现，可使用现有的轮子string-replace-loader。

这个loader能够在编译阶段修改代码，而且可使用正则表达式进行替换。可使用它来加载js文件，而后删除部分代码。下面的例子的做用是删除js文件中全部的less代码导入。

{
	module: {
		rules: [
			{
            test: /.js$/,
            use: (function(){
                var list = ['这里能够加上其余须要的loader']; 
                // 更具编译目标删除less的导入
                if (process.env.ctarget === 'js') {
                    list.push({
                        loader: 'string-replace-loader',
                        options: {
                            search: '^.+?require\\(.+(\\.less).+$',
                            replace: '',
                            flags: 'm'
                        }
                    })
                }
                return list;
            })()
        }
		]
	}
}
复制代码

这里在使用string-replace-loader必定要加上flags: 'm'，不然没法进行多行匹配。

若是要单独打包css咱们能够写一个和string-replace-loader做用相反的loader，只保留样式部分而删除其余js代码。

4. 效果

通过实际测试，这个优化能够节省50%的时间。固然具体到每个项目还要看js和css模块数量的比例。