玖叶教程网

前端编程开发入门

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

参考解决方式

  • 使用 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)

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言