前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)

探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小,以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。

使用 peerDependencies 缩减项目体积

一、什么是 peerDependencies

peerDependencies 存在于 NPMpackage.json 中,如果项目中依赖模块 X、模块 Y,模块 Y 又依赖模块 X,当模块 X 出现版本冲突的时候,则会打包出 X 的两份代码。在这个模块 Y 里面使用 peerDependencies 引入模块 X,这样当前项目和模块 Y 便会共用这个模块 X。

当在 peerDependencies 引入一个模块后:

  1. 当前的代码将与符合版本条件的模块和谐相处。
  2. 如何这个模块已经存在于项目的 node_modules 中,什么也不提示。
  3. 如何这个模块不存在于项目的 node_modules 中,警告用户缺少此模块,但是不自动安装。

注意: npm i 并不会自动安装 peerDependencies 里的模块,所以开发模块的需要在 devDependencies 同步添加相应模块。

二、什么场景下适合引入 peerDependencies

  1. 多份模块代码的重复加载易引发冲突。
  2. 依赖在项目中是可见的。
  3. 可以让开发者自己决定安装哪个版本。

"使用 peerDependencies 缩减项目体积"继续阅读