webpack提速构建

写在开头

项目开发过程中插件使用得都不知道多爽！~ 特别是一些非常另类的需求，真的不喜欢自己花大量的时间和精力去写写改改，用开源插件可能一个小时就搞定了，但单项目要发包或者构建时，问题出现了：打开太慢了！（因此我还背过不少的锅…）

发现问题

随着时间的迁移和代码体积越来越庞大，开发体验的问题也就随之出现。比如，使用webpack-dev-server启动服务时，你可能需要等待90s；又比如，改一行代码调试bug时，你可能需要等待35s。这是在8g运行内存的MacBook上面的开发体验，如果你的电脑运行内存比这个低的话，可能会更久…

额…，启动了一下项目，106秒…

于是添加了webpack-bundle-analyzer看了下每个包的大小

感觉有太多无用的引入了

解决思路

因为webpack配置是一个典型的多入口类型，每次打包出来的代码包含了十几个子项目模块。但是一般的开发需求往往集中在一个子项目中去开发，所以只需要打包某个具体的子项目就满足了。

另一方面，项目构建打包的大部分时间花费在了loader上面，其中主要是babel-loader和eslint-loader，如果把loader编译的结果缓存下来应该能有效缩短构建时间。

优化过程

1. webpack打包的配置先拎出来 建立

entry.config.js

还要建立 devServer 需要知道打了那些项目

exports.entryName = 'projectA'

执行脚本

let projectName = process.argv[2] || "all";

let fs = require("fs");

fs.writeFileSync("./config/entry.js", `exports.entryName = '${projectName}'`);

let exec = require("child_process").execSync;

exec("npm run serve", { stdio: "inherit" });

再次打包发现

已经好很多啦！

再次看包的大小

从图看出 包的大小也少了很多，但也有优化的空间

总结

webpack提速的方法还有很多，例如一些数据格式的转换可以尽量原生去替代插件，减少体积和提高打包的质量、cdn的引入、按需…

需求不息，优化不止，希望能给优化开发体验、提升构建速度的小伙伴们一个参考。

欢迎关注我的博客： https://blog.csdn.net/weixin_42323607

github地址： https://github.com/qdheyongjie

多多支持！本人会持续更新哒 ❤️