Vue打包部署优化

标题Pulic下的index.html引入CDN链接

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
      <!-- 引入elementui样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <!-- 引入vue -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!-- 引入组件库 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <!-- swiper -->
      <script src="https://unpkg.com/swiper@5.3.8/js/swiper.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper/dist/vue-awesome-swiper.js"></script>
      <!-- video -->
      <link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
      <script type="text/javascript" src="path/to/video.min.js"></script>
      <script type="text/javascript" src="path/to/vue.min.js"></script>
      <script type="text/javascript" src="path/to/dist/vue-video-player.js"></script>
      <script type="text/javascript">
        Vue.use(window.VueVideoPlayer)
      </script>

index.html的完整内容 CDN的引入要在<div id="app"></div>之前

elementui是基于Vue的所以在引入elementui的同时也要引入elementui

Main.js中要注释引入相关的组件

// import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./assets/all.css";
// import * as echarts from "echarts";
import "./assets/font/iconfont.css";
// import VueVideoPlayer from "vue-video-player";
// import "video.js/dist/video-js.css";
// import Video from "video.js";
import Axios from "axios";
import dayjs from "dayjs";
import scroll from "vue-seamless-scroll";
import VueParticles from "vue-particles";
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Carousel3d from "vue-carousel-3d";
import "babel-polyfill";
// import vueSwiper from "vue-awesome-swiper";
// import "swiper/swiper-bundle.css";
// Vue.use(vueSwiper); // 轮播图

Main.js代码中注释掉相对应的引入后，Vue.config.js中同时要配置 configureWebpack下的externals

配置截图

在引入CDN的同时要主要引入相对应的版本号，如果不知道自己的项目的依赖的版本号可以通过vue ui调出Vue项目的整体情况然后再去找对应的依赖版本引入

CDN引入完成后 可以通过webpack-bundle-analyzer 这个插件来看到自己的项目被Build后的大小，可以通过前后的大小对比来直观的看出自己项目的优化空间

webpack-bundle-analyzer的安装：

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

Vue.config.js下配置
![请添加图片描述](https://img-blog.csdnimg.cn/73cd6c38349c41318ff5f7e60a7dde66.png

配置完成后通过npm run build -- --report这个命令来build项目

随后项目中会产生一个dist文件

dist文件中有个report.html文件

点开这个文件就能直观的看到你的项目的依赖的大小

随后就可以根据大小适当的去优化项目了