Day365:如何解决 Vue 打包 vendor 过大的问题？Webpack 打包 vue 速度慢怎么办？

[Genzhen]

每日一题会在下午四点在交流群集中讨论，五点小程序中更新答案
欢迎大家在下方发表自己的优质见解

二维码加载失败可点击 小程序二维码

扫描下方二维码，收藏关注，及时获取答案以及详细解析，同时可解锁800+道前端面试题。

---

参考解决方式

• 使用 vue-router 路由懒加载
• 使用 gzip 压缩
• 使用 CDN 引入 js 和 css 文件
• 配置 webpack 的 external，不打包第三方库
• 配置 DllPlugin 和 DllReferencePlugin 将引用的依赖提取

webpack 打包 vue 速度慢，可以通过 webpack-bundle-analyzer 进行可是化分析，主要看依赖和 chunks 打包的时间。

• 减少文件依赖嵌套的深度
• 使用尽可能少的处理（loader、plugin）
• DLL 处理第三方的包
• 多线程打包（HappyPack）
• 关闭 sourcemap
• 减少代码体积、压缩代码
• 优化 resolve.extensions 配置
• 优化 resolve.modules 配置
• 优化 resolve.alias 配置
• 使用 include 和 exclude
• 设置 babel-loader 缓存

另外打包慢，是一个综合因素，和 Vue 关系不大

• 确保 Webpack 、Npm、Node 及主要库版本要新，比如 4.x 比 3.x 提升很多，5.x 比 4.x 又提升很多。
• loader 范围缩小到 src 项目文件，一些不必要的 loader 能关就关了
• eslint 代码校验其实一个很费时间的步骤
  • 可以把 eslint 范围缩小到 src，且只检查 *.js,*.vue文件
  • 生产环境不开启 lint，使用 per-commit 或者 husky 在提交前校验
• 其它还是前边提到的，多进程运行，动态链接库(DllPlugin)