vue.js - 请问vue2-cli的webpack可以做哪些优化，附上注释和代码可以吗或者好的视频教程要是vue2-cli的？

Question

实在找不到感觉全面的方案，要不就是注释不多，请教啦

Answer 1

优化的方法有很多，这边先简单说两个，不知道是不是你需要

• 提升开发体验

  • 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。

• 提升 webpack 提升打包构建速度

  • 使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。
  • 使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。
  • 使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快。
  • 使用 Cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。
  • 使用 Thead 多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）

Answer 2

你这个问题本身就有问题。

1. 你想做哪方面的优化？为什么要优化？目前的瓶颈在哪里？考核标准是什么？
2. 公共仓库封装出来的配置一般来说未必是最好的，但绝对不会差，我觉得优化余地不大
3. webpack 文档很齐全，看完一遍就知道能怎么改了；vue-cli 可以输出生成的 webpack.config.js，两者一配合就知道该怎么改了
4. webpack 的版本很多，分享也很多，很多分享质量都不好，我建议不要太依赖看教程，尽量根据自己的需求，查文档来做