一行可以让项目启动快 70% 以上的代码(实用)(1)，web后端开发工程师

plugins: [

new HardSourceWebpackPlugin()

]

这就完事了。

就这么简单？确实是这么简单，但也不简单，如果到此为止，笔者也不会折腾一下午了。

就这么简单的一安装：

npm i hard-source-webpack-plugin -D

然后像👆一样简单的配置，然后重启项目，您猜怎么着？

报错了！

原因是什么呢？

是因为speed-measure-webpack-plugin或者webpack-bundle-analyzer中的某一个，为什么呢？

原因笔者其实并不太清楚，因为启动的时候报的错是这样的：

Cannot find module ‘webpack/lib/DependenciesBlockVariable’

哦呦，这个错有点小意外，怎么会突然报webpack的错呢？

笔者也是百思不得其解啊，去Google也没有人遇到这种问题。

不得已，只能去hard-source-webpack-plugin的github上看issue，发现其实有人遇到这个问题的，他们的解决方案就是降低webpack的版本，可笔者这里没办法这么做，因为都集成在vue-cli里了，而且这个还是公司内部包了一层的，这就根本不可能降版本了。

第一个转机

那还能怎么办呢？

实在没有办法了，笔者尝试搜索DependenciesBlockVariable的相关内容，这时事情发生了一丝微妙的变换，原来这个功能在webpack5中被移除了，难道是因为公司内部的vue-cli用的是webpack5.x版本？

img

笔者当即在node_modules里面找到了插件，然后查看了package.json文件，结果失望的发现webpack的版本是4.2.6，这就令人绝望了，难道真的不可以么？

既然打开了webpack的文档，那就好好看看吧。老实说这文档笔者已经看了N次了，真是每次看都有小惊喜，功能真是太多了。

翻着翻着就看到了这个小功能👇：

哦呦，还真有点小惊喜呦，这功能简直了，这不就是我想要的么？然后当机立断，往vue.config.js里一家，您猜怎么着？

成了！

虽然文档是webpack5.0的，但笔者发现4.x版本中也有这个功能，可能若一弱一些吧，多少能用啊。

重启了几次项目后发现启动时间已经稳定了，效果真的还不错呦～

img

直接给我干到了14秒，虽然有些不太稳定，但这已经是当前状态的最好解决方案了。

所以最后的代码就是：

chainWebpack: (config) => {

config.cache(true)

}

用chainWebpack的原因是项目中其实没有独立的webpack.config.js文件，所以只能放在vue.config.js文件中，使用chainWebpack来将配置插入到webpack中去。

你以为事情到这里就结束了么？太简单了。

第二个转机

解决完问题后，当然要把speed-measure-webpack-plugin和webpack-bundle-analyzer这两个插件删掉了，然后整理整理代码，推上去完事。

可笔者还是不死心，为啥hard-source-webpack-plugin不好使呢？不应该啊，为啥别人都能用，自己的项目却用不了呢？

为了再次操作一手，也是为了更好的优化项目的启动时间，笔者再次安装了hard-source-webpack-plugin，并且对其进行了配置：

chainWebpack: (config) => {

config.plugin(‘cache’).use(HardSourceWebpackPlugin)

}

这次再一跑，您猜怎么着？

成了！

为了避免再次启动失败了，笔者这次没有使用speed-measure-webpack-plugin和webpack-bundle-analyzer这两个插件，所以启动时间也没法具体估计了，但目测时间再10秒以内，强啊。

所以说hard-source-webpack-plugin失败的原因可能就是那两个统计插件的原因了，得亏再试了一次，要不然就不明不白的GG了。

结论

这里的结论就很简单了，有两个版本。

首先，如果项目能使用hard-source-webpack-plugin就很方便了，用就完事了，啥事也不需要干，所以这一行代码是👇：

config.plugin(‘cache’).use(HardSourceWebpackPlugin)

大概真能快90%以上，官方并没有虚报时间。

其次，如果用不了hard-source-webpack-plugin那就放弃吧，尝试webpack自带的cache功能也是不错的，虽然比不上hard-source-webpack-plugin，但多少也能提升70%左右的启动时间，所以这一行代码是👇：

config.cache(true)

复制代码

并且不需要安装任何插件，一步到位。

这两种方法其实都是可行了，论稳定和效果的话hard-source-webpack-plugin还是更胜一筹，但cache胜在不用装额外的webpack插件，具体用什么就自己决定吧。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取

CoPEF.jpg" />

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取

[外链图片转存中…(img-pltKs7VL-1712259162262)]