Vue项目使用CDN优化首屏加载问题，cdn引入Element UI

首先遇见的第一个坑是Element UI依赖于vue，若是cdn引入Element UI，vue也得使用一份cdn引入

接下来在index.html中cdn进行引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="Shortcut Icon" href='./static/img/favicon.ico' type="image/x-icon" />
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>xxx平台</title>
    <style>
      .el-message{
        top:60px !important;
      }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@5.3.6/css/swiper.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="//at.alicdn.com/t/font_2020075_kwfmx8jsn5.js"></script>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script>
    <!-- vue-router -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script> -->
    <!-- element-ui -->
    <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
    <!-- swiper -->
    <script src="https://unpkg.com/swiper@5.3.6/js/swiper.js"></script>
    <!-- vue-awesome-swiper这个文件一定要引入，否则的话swiper无法正常使用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper/dist/vue-awesome-swiper.js"></script>
    <script type="text/javascript">
          Vue.use(window.VueAwesomeSwiper);
    </script>
  </body>
</html>

就是在main.js中去掉Element UI

// 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'
//element-ui 引入
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
Vue.config.productionTip = false
//引入对项目初始文件
import './assets/css/reset.css'
...
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

然后在webpack.base.conf.js设置

  output: {
    ...
  },
  externals : {
    'vue':'Vue',
    // 'vue-router': 'VueRouter',
    'element-ui':'ElementUI',
    'swiper': 'swiper'
  },

这样这是完成后运行 npm run build 可以明显看见打包后首屏文件vendor变小。

这样设置后直接在本地运行项目npm run dev 也是没有问题可行的