Vue-cli 默认使用的是 'eval-source-map'，这种类型的 Source Map 在开发环境下效果很好,但在生产环境下可能会有性能问题。更推荐使用 'source-map' 或 'hidden-source-map' 类型,前者可以提供完整的源码映射,后者可以隐藏源码内容。
在开发环境下,我们可以使用详细的 Source Map 类型以获得更好的调试体验。而在生产环境下,我们可以使用性能更佳的 'source-map' 或 'hidden-source-map' 类型。可以通过 'process.env.NODE_ENV' 来区分不同的环境。
即使使用性能较好的 'source-map' 类型,Source Map 文件的体积也可能会较大。此时可以使用第三方工具如 source-map-explorer 对 Source Map 进行压缩,以降低文件大小和传输时间。
在生产环境下,我们可以采取按需加载 Source Map 的策略,即在用户报错时再进行加载。这样可以有效减少不必要的 Source Map 传输,提高页面加载速度。
优化 Vue-cli 打包时的 Source Map 配置需要结合实际情况进行选择和调整,既要保证开发调试体验,又要兼顾生产环境的性能。通过以上几个方法,相信开发者可以找到一个平衡点,提高项目整体的打包质量。
