前端优化—打包速度提升43.5%
💡
原文中文，约2000字，阅读约需5分钟。
📝
内容提要
该项目通过webpack-bundle-analyzer插件分析打包情况，发现assets文件占67%，建议将大量svg迁移至CDN，并使用svg-sprite-loader优化svg配置，以减少打包时间和体积。经过多次尝试，确认某些插件对打包体积有影响。
🎯
关键要点
-
项目通过webpack-bundle-analyzer插件分析打包情况。
-
assets文件占比67%，主要为svg文件，字体文件占12.1MB。
-
建议将大量svg迁移至CDN，并使用svg-sprite-loader优化svg配置。
-
当前打包用时194046ms，原始配置只有3个主要chunk。
-
使用svg-sprite-loader优化配置可减少打包时间和体积。
-
原始配置未明确symbolId命名，导致打包时间较长。
-
选择特定插件可降低打包时间，但可能增加打包体积。
-
多次尝试确认某些插件对打包体积有影响。
❓
延伸问答
如何使用webpack-bundle-analyzer分析打包情况？
可以通过安装webpack-bundle-analyzer插件，并在webpack配置中添加BundleAnalyzerPlugin来分析打包情况。
项目中assets文件占比是多少？
项目中assets文件占比为67%，主要是svg文件。
如何优化svg文件的打包配置？
可以使用svg-sprite-loader来优化svg配置，并将svg文件提取成一个文件以减少打包时间和体积。
当前打包的时间是多少？
当前打包用时为194046毫秒。
迁移svg文件到CDN有什么好处？
迁移svg文件到CDN可以减少打包时间和体积，提高加载速度。
选择特定插件对打包体积有什么影响？
选择特定插件可以降低打包时间，但可能会增加打包体积。
➡️
