Vue首屏加载优化之使用CND资源
背景
vue项目线上首屏加载速度非常慢，查看网络中加载的资源文件发现main.js文件大小为3.6MB，加载速度也是高达6.5s，已经严重影响了用户的体验效果。经过查看发现项目本地打包后main.js大小也是高达三十多兆，为了减少main.js文件打包后的大小，查阅了众多经验文章后，发现使用CDN替代package引入后，体积可以大大减少。
建议
像echarts这种比较大的库，不要挂载比较大的库，一般使用到的地方不多按需加载就行。
使用CND资源
进入正题，这里修改了vue、vue-router、vuex、element-ui和mint-ui。
- 首先修改模板文件
index.html注意对应之前版本号。
<head>
...
<!-- element-ui 组件引入样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.5.4/theme-chalk/index.css">
<!-- mint-ui 组件引入样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css">
</head>
<body>
<!-- 引入vue -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<!-- 引入vuex -->
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://cdn.bootcss.com/element-ui/2.5.4/index.js"></script>
<!-- 引入mint-ui组件库 -->
<script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
<div id="app"></div>
</body>
- 修改
build/webpack.base.conf.js。配置externals
/ * 说明：由于本项目是vue-cl2搭建，并有一个node中间层，所以我修改的是webpack.client.config.js文件*/
module.exports = {
...
externals: {
// CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
// 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，
// 不去 node_modules 中找，而是去找 全局变量 ELEMENT
'element-ui': 'ELEMENT',
'mint-ui': 'MINT',
},
...
}
- 修改
src/router/index.js
// 原来的样子
import Router from "vue-router";
Vue.use(Router);
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const router = new Router({})
// 修改后的样子
import VueRouter from "vue-router";
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({})
// 总结
1、由于我们在externals中定义的vue-router的名字是‘VueRouter’，所以我们需要使用VueRouter来接收 import VueRouter from "vue-router";
2、注释掉 Vue.use(Router)
- 修改
src/store/index.js
...
// 注释掉
// Vue.use(Vuex)
...
- 修改
src/main.js
/* 原来的样子 */
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI);
// element-ui
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUi);
new Vue({
render: h => h(App),
router,
store
}).$mount("#app");
/* 修改之后的样子 */
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import {sync} from 'vuex-router-sync' // 这里使用了vuex-router-sync工具 作用：是将`vue-router`的状态同步到`vuex`中
// mint-ui
import MINT from 'mint-ui'
Vue.use(MINT);
// element-ui
import ELEMENT from 'element-ui'
Vue.use(ELEMENT);
sync(store, router)
new Vue({
render: h => h(App),
router,
store
}).$mount("#app");
// 总结：
1、element-ui 和 mint-ui 的变量名要使用 ELEMENT 和 MINT，在配置externals时有。
这样操作之后，重新打包一下可以发现，main.js文件大小已经减小到了12MB，当然这也和main.js我文件里引入其他东西的缘故，最后打开页面的时间也是得到了减少，这边文章作为一个记录和简单的介绍，希望能够给你带来帮助。
链接：https://juejin.cn/post/7009120766465687588
