在 Vue 项目中,引入到工程中的所有 js、css 文件,编译时都会被打包进 vendor.js,若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验。
解决方案:将引用的外部 js、css 文件剥离出来,不编译到 vendor.js 中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将 vendor.js、外部的 js 等加载下来,达到首次打开加速的目的。
推荐外部的库文件使用CDN资源:

  1. bootstrap CDN:https://www.bootcdn.cn
  2. Staticfile CDN:https://www.staticfile.org
  3. jsDelivr CDN:https://www.jsdelivr.com
  4. 75 CDN:https://cdn.baomitu.com
  5. UNPKG:https://unpkg.com
  6. cdnjs:https://cdnjs.com

第一步:引入资源
在 index.html 中,添加CDN资源,

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.staticfile.org/element-ui/2.4.3/index.js"></script>
<!-- 引入样式 -->
<link href="https://cdn.staticfile.org/element-ui/2.4.3/theme-chalk/index.css" rel="stylesheet">
<!-- 引入echarts -->
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>

第二步:添加配置
在 bulid/webpack.base.conf.js 文件中,增加 externals,将引用的外部模块导入,如下:
在这里插入图片描述

注意一点: 格式为 ‘aaa’ : ‘bbb’, 其中,aaa 表示要引入的资源的名字,bbb 表示该模块提供给外部引用的名字,由对应的库自定。

第三步:去掉原有的引用
去掉 import:

// import Vue from "vue";
// 引入element 组件
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
// import VueRouter from "vue-router";
// import Vuex from "vuex";

去掉 Vue.use(xxx):

// Vue.use(ElementUI);
// Vue.use(VueRouter);
// Vue.use(Vuex);

重新 npm run build,会看到此时 vendor.js 体积有所减小了很多。通过开发者模式的Network工具,可以看到 vue.js、vuex.js、vendor.js 等文件会分别由一个线程进行加载。且因为使用了CDN,减轻了带宽压力。

注意事项:
1、在第一步引入资源时注意 vue.js 必须在 vue-router、vuex、element-ui 之前引入。
2、在第二步修改配置时注意 “element-ui”: “ELEMENT” 是固定写法不能更改。
3、如果 element-ui 采用 cdn 引入的方式,vue 不采用 cdn 引入的方式,这样打包以后打开 dist 下的 index.html 时页面空白报错,必须 vueelement-ui 都采用 cdn 引入的方式。

Logo

前往低代码交流专区

更多推荐