如何减少vue.js应用程序的捆绑包大小

###使用摇摇欲坠的建筑步骤

减少捆绑尺寸的最有效方法之一是使用支持摇摇欲坠的现代构建工具。摇树是一个从最终捆绑包中消除未使用的代码的过程。 Vue的API和许多现代JavaScript库被设计为正确捆扎时可摇晃。例如，诸如内置的未使用的VUE组件``如果不使用，将不会包含在生产构建中。构建时间期间的预编译模板还避免将VUE编译器运送到浏览器，该浏览器可以节省大约14千万千万千万千万千万千万kb的JavaScript，从而降低运行时成本。

###管理和分析依赖关系

依赖性通常会对捆绑尺寸产生重大贡献。重要的是：

- 选择提供ES模块格式并享受树木友好的依赖项(例如，``lodash-es''而不是`lodash')。
- 定期使用``webpack-bundle-analyzer''等工具审核您的依赖项，以识别大型或不必要的软件包。
- 使用``depcheck''或'npm rune'等工具删除未使用的依赖项。
- 用较小，更集中的替代方案代替大型依赖项。例如，用较小的图表来代替像``echarts''这样的繁重的图表。

###懒负载路线和组件

懒惰加载是一种策略，仅在需要时加载路线或组件的代码，而不是预先捆绑所有内容。 Vue路由器通过动态导入组件，将捆绑包分成较小的块，以改善初始负载性能，从而支持懒惰的加载路线。当用户在应用程序中导航时，此方法可大大降低主捆绑包的大小，并随着时间的推移扩展代码加载。

###使用代码拆分和动态导入

WebPack(通常用于VUE项目)，支持通过Dynamic`import()`语句拆分代码。这意味着您的应用程序的一部分可以分为单独的捆绑包，这些捆绑包被异步加载。正确利用代码分开，有助于通过需求加载所需的代码来管理捆绑尺寸。

###降低和压缩

缩放通过删除空格，注释和缩短变量名称来减少JavaScript文件的大小。在生产构建步骤中，诸如uglifyjs或Terser(通常集成在现代构建过程中)的工具会自动缩小代码。此外，GZIPPIPT或BROTLI压缩进一步减少了用于用户的资产的规模。

###在特定用例中使用较小的vue替代方案

对于完整的vue.js框架可能太重的项目，尤其是对于进行性增强案例，请考虑使用较轻的替代品，例如Petite Vue(尺寸仅约6 kb)。如果项目不需要完整的VUE生态系统，这将很有帮助。

###范围和导入仅需要库的部分

许多大型库，例如Bootstrap Vue或Lodash，仅允许仅导入特定组件或功能，而不是整个库。例如，与其导入所需的组件，而不是导入整个Bootstrap Vue库，从而通过排除未使用的零件来降低捆绑包大小。同样，导入lodash函数模块化(从'lodash/map'导入映射，而不是整个lodash)。

###如果不需要

CSS框架(例如Bootstrap)添加到捆绑尺寸。评估您是否真的需要整个框架，并考虑诸如Tailwind CSS之类的替代方案，以使其更灵活，更小的CSS捆绑包。另外，考虑如果可能的话，请考虑删除未使用的样式进口或外部托管CSS。

###服务器端渲染和静态站点生成

通过SSR(服务器端渲染)或SSG(静态站点生成)将一些渲染移至服务器，可减少客户端所需的JavaScript量，从而有效地降低捆绑包大小。这将渲染责任转移到服务器上，并以最小的JS进行交互性，将预构建的HTML发送给客户端。

###优化图像和其他资产

尽管这不会直接影响JavaScript捆绑包大小，但优化图像，字体和资产有助于整体页面加载性能，这补充了JavaScript改进。

###明智地使用现代JavaScript功能和polyfills

使用现代JavaScript语法，与现代构建工具结合使用时会导致较小的束。除非针对较旧的浏览器，否则避免不必要的多填充物，并根据用户浏览器功能考虑条件多填充。

###实践摘要减少vue.js捆绑包大小

- 将构建工具与摇摇欲坠(例如Webpack，Vite)一起使用。
- 预编译VUE模板。
- 使用``webpack-bundle-Analyzer'''等工具分析捆绑包内容。
- 删除或替换重型依赖性。
- 仅导入库中所需的组件或功能。
- 为路由和组件实现懒惰加载。
- 使用代码拆分和动态导入。
- 应用缩小和压缩。
- 考虑较小的替代品，例如针对特定应用的小vue。
- 优化CSS使用情况并避免不必要地导入整个框架。
- 使用SSR或SSG降低客户端捆绑尺寸。
- 优化资产并仔细使用现代JavaScript功能。