曲线救国：webpack打包优化黑科技

点击上方“前端小苑”，选择“置顶公众号”

精品技术文章，热门资讯第一时间送达

webpack打包遇到的痛点

随着项目越来越复杂，我们在用webpack打包的时候，会发现打包的速度越来越慢，最后慢到打包一次要几分钟甚至更多的时间，缓慢的打包速度严重影响效率，那么如何提高打包速度就成为了我们的痛点，一般大家都是用HappyPack、Dellplugin和UglifyJsPlugin(之前是ParallelUglifyPlugin，现在不维护合并到UglifyJsPlugin了)的parallel设为true来提高打包速度，但这样依旧无法解决我们项目庞大而导致打包速度的缓慢问题，实质上打包速度慢的根本原因是因为，每次打包都是要把所有的文件都打包一遍，所以如果我们想提高打包速度，那么我们可以只打包修改的或者新加的文件，本文基于此提供一个方案。

前言

我们使用webpack来打包的时候，会有一个或者多个入口文件，打包到对应的html中，而我们知道打包最耗时的就是对js进行压缩和混淆的UglifyJsPlugin插件，如果我们的项目庞大，入口文件过多，那么打包js的速度将严重缓慢，so我们可以通过一些手段来告诉webpack我们只想打包指定的入口文件，生成对应的html，通过“大事化小”的方式提高打包速度。

一般我们在写webpack的入口文件的时候，我们不会一个一个手动写上去，像这样

这种方式在项目庞大的时候代码管理起来很麻烦，且要手动维护，所以我们会按照某种规则管理我们的文件，然后写一个方法来获取入口文件，比如:

这里，我们的所有入口文件都以index.js为命名，且key为views下到对应index.js的文件路径，例如./src/views/test/index.js的key就是test。根据这个规则，它会自动获取src/view下的所有入口文件index.js，并生成入口文件对应的html。

那么如果我们修改与入口文件同个目录的所有代码，我们希望打包的时候就打包这个入口文件，未修改的其他入口文件统统不打包，这样就可以做到精确打包了，

所以我们约定，我们所有与入口文件相关的所有业务代码都放在入口文件相同的目录下，这样当我们修改了代码以后，我们就只打包修改的代码对应的入口文件。

怎么判断修改或者新建了文件

方法一

修改了哪些代码，用户自己最清楚，我们可以通过运行打包程序时告诉程序我们修改了哪些模块，我们可以使用inquirer来让用户手动输入，也可以通过命令行的方式输入，关于命令行的输入，现在npm命令可以接受参数的输入，在node我们只需要通过process.argv来获取用户输入的参数。

这种方式的缺点就是需要用户输入，没有做到自动化。

方法二

我们知道git可以知道用户修改过哪些文件和新建了哪些文件，那么利用这点我们就可以知道哪些文件修改过，哪些文件是新增的，我们针对修改过和新增的文件进行打包，未改动的忽略，如此我们便可以做到针对性的打包，而避免了全量打包的漫长过程。
我们知道，当我们使用git status命令的时候，git会给我们这样的提示:

so，我们可以通过写一些正则表达式，把这些修改的和新增的文件给匹配出来，然后针对性的进行一些处理从而得出是哪个入口文件的内容需要重新打包。下面基于方法二，讲下如何做。

第一步：使用shelljs模块获取git status打印出来的字符串

第二步：匹配出修改的文件列表

第三步：匹配出新增的文件列表

这里我以src/views目录下，入口文件以index.js为例

第四步：针对性打包/增量打包

有了第二步获取的修改文件的路径，经过一些处理，我们就可以知道哪些入口key修改了，然后打包的时候就只打包这些修改的key对应的入口文件

获取新建文件的entry，通过git我们可以获取新加的文件列表，然后根据文件列表我们获取新加的entry，所以我们扩展getEntry方法，但传入参数为文件列表的时候，我们从新加的文件列表中获取新建的entry

最后我们要根据修改文件列表和新加的文件列表生成HtmlWebpackPlugins以打包对应的html

其他问题

如果我们修改了一些全局的代码，比如各个组件依赖的js，css等等，这个时候需要进行全量打包了，那么候我们可以通过参数告诉程序我们要全量打包，参照方法一，通过npm run build -- all

关于本文

作者：大雄没了多啦a梦

来源：掘金

原文链接：https://juejin.im/post/5c6e1c8d6fb9a049e308b0cd

版权声明：本文经作者授权转载，版权归作者所有