vue项目部署优化——引入CDN

引入工程中的js、css文件，编译时都会被打包进dist/js中，浏览器必须在加载完js文件后，才能开始显示首屏，这会导致首屏显示速度降低。

解决办法就是：

将引入外部的js和css文件剥离开，不编译到dist/js中，而是用资源的形式引用，这样浏览器可以使用多个异步的线程去加载dist中的js文件和外部的js文件，达到加速首开的效果；

实践

1.引入免费的CDN

这里推荐今日头条的CDN库字节跳动静态资源公共库

在/public/index.html 项目的入口样式文件

注意引用顺序，例如element-ui要在vue之后引入

2.资源配置

/vue.config.js；如果没有这个文件，可以自己手动创建；

关于什么是vue.config.js，可以参考这篇文章vue.config.js简介_茉li的博客-CSDN博客_vue.config.js

module.exports = {
  configureWebpack:config =>{
    config.externals = {
      'vue':'Vue',
      'vue-router':'VueRouter',
      'vuex':'Vuex',
      'axios':'axios',
      'element-ui':'ELEMENT',
    }
  }
}

注意两点：

1.格式中，引号前面的表示引入资源的名字，引号后面的表示该模块提供给外部引用的名字

例如我在main.js中导入的是

import Vue from 'vue'，这里配置的就是vue:Vue

2.element-ui等之类的第三方插件，一定要注意它的全局配置名，例如2.15.1的全局配置名为ELEMENT，其他版本可能有不同

3.去掉原有的import引用以及注册

src/main.js 等

//删除这类导入js语句
import Vue from 'vue'
import Router from 'vue-router'


//删除这类css语句
import '/style/base.css'


//删除vue注册之类的语句
Vue.use(xxx)

4.去掉NPM包的依赖

package.json