阅读 1798
Vue首屏加载优化之使用CDN资源

Vue首屏加载优化之使用CDN资源

背景

vue项目线上首屏加载速度非常慢,查看网络中加载的资源文件发现main.js文件大小为3.6MB,加载速度也是高达6.5s,已经严重影响了用户的体验效果。经过查看发现项目本地打包后main.js大小也是高达三十多兆,为了减少main.js文件打包后的大小,查阅了众多经验文章后,发现使用CDN替代package引入后,体积可以大大减少。

建议

像echarts这种比较大的库,不要挂载比较大的库,一般使用到的地方不多按需加载就行。

使用CDN资源

进入正题,这里修改了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我文件里引入其他东西的缘故,最后打开页面的时间也是得到了减少,这边文章作为一个记录和简单的介绍,希望能够给你带来帮助。

文章分类
前端
文章标签