优化目的

项目打包上线时，首屏加载的时间十几秒，所以要对项目中一些比较大的第三方库进行抽离和优化，缩短首屏加载的事件

优化静态资源

静态资源体积过大，把项目中所有的静态资源文件统统压缩扔进OOS

性能分析和CDN的应用

由于在一个项目中集成了很多功能，写了很多组件，最终都会打包成一堆文件，但是真实运行的性能是无法通过代码看出来的，所以我们先要使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析
运行代码 $ npm run preview -- --report ，这个命令会从我们的**入口main.js**进行依赖分析，分析出最大的包，方便我们进行观察和优化执行完这个命令，我们会看到如下的页面，图片中方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向

webpack排除打包

CDN是一个比较好的方式

因为有的文件很大所以我们就不要把这些大的文件和那些小的文件打包到一起了，像这种xlsx,element这种功能性很全的插件，我们可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快我们对于插件的访问速度

使用方式

先找到 vue.config.js，添加 externals 让 webpack 不打包 xlsx 和 element

 // 排除 elementUI xlsx  和 vue 
  externals:
      {
        'vue': 'Vue',
        'element-ui': 'ELEMENT',
        'xlsx': 'XLSX'
     }

再次运行，就可以发现包的大小已经大幅减小

CDN文件配置

可以采用CDN的方式，在页面模板中预先引入，这时的配置实际上是对开发环境和生产环境都生效的，在开发环境时，没有必要使用CDN，此时我们可以使用环境变量来进行区分

let cdn = { css: [], js: [] }
// 通过环境变量 来区分是否使用cdn
const isProd = process.env.NODE_ENV === 'production' // 判断是否是生产环境
let externals = {}
if (isProd) {
  // 如果是生产环境 就排除打包 否则不排除
  externals = {
    // key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
    'vue': 'Vue', // 后面的名字不能随便起 应该是 js中的全局对象名
    'element-ui': 'ELEMENT', // 都是js中全局定义的
    'xlsx': 'XLSX' // 都是js中全局定义的
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 提前引入elementUI样式
    ], // 放置css文件目录
    js: [
      'https://unpkg.com/vue/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx 相关
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js' // xlsx 相关
    ] // 放置js文件目录
  }
}

注入CDN文件到模板

通过 html-webpack-plugin注入到 index.html之中:

config.plugin('html').tap(args => {
  args[0].cdn = cdn
  return args
})

找到 public/index.html。通过配置的CDN Config 依次注入 css 和 js。

<head>
  <!-- 引入样式 -->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>">
  <% } %>
</head>

<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>

最后，进行打包$ npm run build:prod

配置抽离第三方库，进行cdn引入