DEV Community
·
通过外部导入优化VUE打包，显著减少ESP8266可编程控制器的页面加载时间
原文英文，约400词，阅读约需2分钟。
📝
内容提要
通过CDN引入外部包和部分导入，优化了VUE的js包大小，使vendor.js文件从6.8M降至2.0M，页面加载时间从15秒缩短至3秒，显著提升了ESP8266可编程控制器的远程管理系统的用户体验。
🎯
关键要点
-
通过CDN引入外部包和部分导入，优化了VUE的js包大小。
-
vendor.js文件的大小从6.8M降至2.0M。
-
页面加载时间从15秒缩短至3秒，显著提升用户体验。
-
集成了微信公众账号，实现无需APP的便捷控制。
-
使用webpack-bundle-analyzer分析文件大小，发现element UI占用空间过大。
-
通过部分导入和CDN加载，减少了element UI的空间占用。
-
在webpack.base.config.js中配置externals，移除main.js中的vue和element UI导入。
-
最终优化后的vendor.js文件大小和加载时间显著改善。
❓
延伸问答
如何通过CDN优化VUE的js包大小？
通过CDN加载js和css文件，并进行部分导入，可以显著减少VUE的js包大小。
优化后的vendor.js文件大小是多少？
优化后的vendor.js文件大小从6.8M降至2.0M。
页面加载时间从多少减少到多少？
页面加载时间从15秒减少到3秒。
如何分析webpack打包后的文件大小？
可以使用webpack-bundle-analyzer组件来分析打包后的文件大小。
为什么要进行部分导入而不是整体导入element UI？
部分导入可以减少element UI占用的空间，从而优化文件大小。
如何在webpack配置中移除vue和element UI的导入？
在webpack.base.config.js中配置externals，并移除main.js中的vue和element UI导入。
🏷️
