Vue项目优化-通过externals加载外部CDN资源

Posted 2023-03-09

参考技术A   继续记录学习过程。
  在查看打包报告时，通过VueCli的可视化UI面板运行build查看报告，发现还是有文件体积较大，这样的大文件可能会造成长时间请求，等待时间过长。

b.删除相应的improt,我这里只删除 main-prod.js 中的类似的内容

c.在public目录下的index.html文件头部，添加CDN资源引用:

当然还有这些

  做完这些，重新build,发现大文件小了很多，效果立竿见影，但是发现依赖项中elemnt-ui也是一个大文件，虽然我们在开发的过程中，Element-ui的内容是按需引入，尽可能减少了打包的体积，但是那些被需要的组件，任然占据了很大的体积，此时，我们也需要通过CDN的形式来加载，这样能够进一步减小打包后的体积。过程还是原来的配方，再走一遍流程：a.在 main-prod.js中，注释掉element-ui按需加载的内容；
b.在index.html的头部区域中，通过CDN加载element-ui的js和css样式
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
重新执行build,查看结果：