在写了ht-vue-webpack-plugin插件之后我对webpack构建和vuecli还有vite核心原理有了极大的理解
1、一个合格的前端项目组成部分
webpack核心构建，模块化解决方案
eslint代码预先约束检查
prettier项目成员代码习惯约束
babel兼容低版本和新语法体验必须品
husky代码提交约束工具
以上是项目的一些基本组成部分，一个成熟完整的项目基本上都有如上的配置
但是也因为以上的配置导致了前端构建的缓慢如乌龟，其中eslint，babel是罪魁祸首
而babel除非换解析器，如es-build或者swc情况下基本上无解。也没几个人敢在生产换，如今的大厂也没人敢换。babel的强大不只是完善上，还有稳定。
那是不是还有别的方式来解决呢
2、从eslint下手
我们发现vite首次运行很快，但是为什么快呢。抛开基本的解析运行下，其实也就比webpack快了一倍。但是我们实际运行中慢的不是一倍是10倍左右
其中你的webpack配置增加了eslint-loader配置有极大的关系。
在每次启动和构建中，eslint并不是按需检测，每次都会扫描所有文件进行检测你的语法规范。这带来了生产构建的提前预知，也带来了运行和构建的慢速。
比如我们项目构建需要5分钟，而eslint-loader就需要2分半
解决方式很简单，我们在生产构建过程中剔除掉eslint-loader部分就能省一倍的时间，项目越大越有效。
其中vueCli
方式如下
chainWebpack(config) {
if (process.env.NODE_ENV === 'production') {
// 在生产构建时禁用eslint-loader，提升构建速度
const eslintRule = config.module.rule('eslint')
eslintRule.uses.clear()
}
},
其他自建webpack的自行参考
3、browserslist的配置
这一步其实主要是webpack构建模板的问题
我们知道vueCli有一个模式叫做现代模式
但是这个模式很坑，会导致项目构建两次，虽然对于页面访问有点提升，但是实际上情况不明显。而且我们公司从去年不知道什么时候开始，默认的所有项目都构建了两次。在代码没有任何改动的情况下，之前其实一直没有关注也就没发现。
最近我闲下来了，重新关注了下，发现问题出在browserslist配置上，让vueCli构建的时候默认构建了两次。也许和browserslist早先把ie11设置为死亡浏览器有关
改动上很简单
.browserslistrc文件
改为
> 1%
last 2 versions
not dead
主要是增加not dead配置，这样就只构建一次了
有些是放在package.json中，同理即可
这里其实核心在于webpack的构建目标和构建模式上，具体参考
www.webpackjs.com/configurati…
4、致谢
谢谢观看
存在以上问题的朋友，百分百能提升百分之70以上的构建效率
