2022-09-26Webpack00
请注意,本文编写于 580 天前,最后修改于 580 天前,其中某些信息可能已经过时。

参考解决方式

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

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!