vue 优化加载速度及在组件中引入外部js文件

解决vue包很大问题,首次加载很慢问题。
常见的解决方法有
1.cdn 引入 在index页,script标签引入各插件 ,如果只有一个组件引用就组件内部在created中创建一个script标签,添加到body里;
a.js添加方法
let s=document.createElement("script");
s.type = 'text/javascript';
s.src = '/dist/jtzy/swagger-ui-bundle.js';
document.body.appendChild(s);
b.vue添加方法
组件中
<div ref="id_name">

     </div>

created: {
let a=this.$refs.id_name.createElement("script")
a.type = 'text/javascript';
a.src = '/dist/jtzy/swagger-ui-bundle.js';
}
2.去掉打包后的map
map是webpack打包后用于调试的的,他能看到源代码,上线的话去掉
3.组件按需引入
4.提高首页加载速度,登录页单独打包
5.图片压缩
实在还不行,登录页单独打包,分模块打包

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:“90后,你的中年危机已经杀到”。这令我很受触动。...
    王钰峰阅读 9,953评论 1 22
  • 最近遇到用swagger写api接口,刚开始是在index.js用script标签引入的,后来负责人说拖累首次加载...
    丰起云啸阅读 10,996评论 0 0
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 4,216评论 0 0
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 5,711评论 0 1
  • 前言 本文主要从webpack4.x入手,会对平时常用的Webpack配置一一讲解,各个功能点都有对应的详细例子,...
    BetterChen阅读 6,001评论 0 3

友情链接更多精彩内容