最后
喜欢的话别忘了关注、点赞哦~
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 缓存
解决方案1必然是最简单的，但其实有点不合理，开着eslint就是为了规范代码格式，虽然在提交代码时也有对应的钩子来格式化代码，但在开发过程中进行提示可以更好的帮助我们形成合理的编码方式。
所以现在剩下的方案就只有进行缓存操作了，接下来笔者就开始找相关插件来更好的进行缓存了。
尝试解决
首先是hard-source-webpack-plugin，这插件为模块提供中间缓存步骤，但项目得跑两次，第一次构建时间正常，第二次大概能省去90%左右的时间。
这插件很多文章都有推荐，感觉很不错的样子，用起来也很简单，只需要👇：
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了。
最后
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
96道前端面试题：
常用算法面试题：
前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化
.youkuaiyun.com/topics/618166371)**
96道前端面试题：
- [外链图片转存中…(img-de8Dt9IM-1715182755725)]
常用算法面试题：
- [外链图片转存中…(img-ZodIvdYa-1715182755726)]
前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化
- [外链图片转存中…(img-WeudWpDv-1715182755726)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
