提高vue项目编译速度的另类方法

之前接手一个项目，构建工具是webapack，前端框架是vue初代，包含多达几个页面，编译速度感人，改个字母，等待时间，足够喝几杯茶，严重影响工作效率，对于我，是绝对不能忍的。

尝试了hard-source-webpack-plugin 效果不是很好。经历几天的失眠，终于找到了解决办法。

就是修改route配置文件，把开发调试不需要的页面，注释掉，果然编译速度飞起。原理很简单，需要编译的代码少了啊。各位看官不要笑😊。vue3推荐的前端构建工具vite，也是同样的原理，使用ESM加载文件，只编译当前页面需要的代码。项目冷启动几乎感知不到编译。

对于一些中古项目，升级vite是比较困难的。注释掉不需要的页面，虽然谈不上多高明，但是可以解决问题啊

这个方法也有一些弊端，就是当开发完需要的功能，放开注释之后，有可能样式错乱，这是由于使用extract-text-webpack-plugin抽取组件样式到单独文件中，使css 选择器的层级产生了错乱。我的解决方案是，使用CSS Modules,让class选择器的名称唯一，这就产生了css 组件作用域，其实跟后来的<style scoped>如出一辙。 不影响其他组件。这样可以解决大部分问题，最好不使用嵌套的选择器修改样式。