vue 首屏优化加载（三）（CND引用）

# 在根目录 index.html 使用 cnd 节点导入

因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>chenbz</title><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"></div><!-- built files will be auto injected --><!-- import Vue before Element --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script></body>
</html>

# 根目录下build/webpack.base.config.js中添加externals

cdn 版本的 element-ui 设置的全局变量是 ELEMENT

......module.exports = {......,externals: {'vue' : 'Vue','element-ui' : 'ELEMENT',}
};

# Main.js 中import … from …与Vue.use(…)就可以去掉了，若没去掉webpack还是会把对应的依赖进行打包

因为 vue 与 element-ui 用 cnd 节点导入，所以在 main.js 中 import 的 vue 和 element-ui 可以注释掉（如果没有注释掉，webpack还是会把对应的依赖进行打包）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
import App from './App'
import router from './router'// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);Vue.config.productionTip = false;/* eslint-disable no-new */
new Vue({el: '#app',
// render: h => h(App),router,components: { App },template: '<App/>',
});

# 接下来 npm run build 成功后你会发现 vendor.js 小了许多

vue 首屏优化加载（三）（CND引用）相关推荐

微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
H5首屏图片加载优化
背景当h5的首屏为一张整图的时候,图片又比较大,加载起来比较慢. 一般常用的方法是将图片无损压缩常用的压缩网站,缺点就是压缩后的图如果在网络较差的情况下,加载也会有一定的延迟,如果网络更加不稳 ...
歪门邪道之解决首屏图片加载闪烁问题
前情描述: 最近接到一个首页图片加载优化的任务,图片是展示在首页RecyclerView中.问题现象是即使有缓存,图片的展示还是会肉眼可见的跳变,没法做到一打开首页,图片就展示在那. 问题定位: Re ...
vue 首屏优化的解决方案
1.路由懒加载 const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index ...
移动spa商城优化记（一）---首屏优化篇
背景随着公司业务的不断壮大,最近老是有用户反应公司APP内的商城打开比较慢,这可不行啊,慢了容易流失用户,流失用户减少公司业绩,公司业绩少我的年终奖就少----,所以为了公司,也为了自己,开始优化之 ...
VUE 首屏加载时间优化
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）
最近在做 Vue 项目的首屏优化,效果不错,在这里将经验分享给大家,总的优化措施是以下四点. 优化方式1:将项目中用到的图片移动到百度云文件存储优化方式2:使用路由懒加载优化方式3:关闭 sour ...
Vue首屏加载白屏问题及解决方案
Vue首屏加载白屏问题及解决方案首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程首先就是 html ,也就是 FP 阶段 FP(全称"First Paint" ...
Vue首屏性能优化组件
Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考 ...