vue项目中,怎么进行打包优化(cdn引入)

配置cdn的加速，能减少一些包带来巨大的体积，也能让用户在访问上能达到一个“快速”的体验，使得用户的访问从距离他们最近的站点去获取到这些资源，缩短传输的距离，达到一个轻量、轻快的体验效果。

我们在打包前,可以运行打包报告命令查看打包后的各项大小 npm run preview -- --report

(当然,由于作者懒没弄上一张没配置cdn前的图,此图是配置之后的样子；没有配置的话可以看到如elementUi，vue等包的大小占了一大块面积~)

不过这都不重要,知道是这样的图就行,重点是怎么去配置。

那么，该如何配置呢

首先，要去除第三方包引入cdn（这里去掉vue，element-ui，xlsx为例）

在我们的vue.config.js中，添加一个isProd来判断是否是生产环境，因为只有生产环境才需要使用到 cdn，开发环境是不需要的

//判断是否是生产环境
const isProd=process.env.ENV==="production"

//定义一个变量，里面用于存储忽略掉的包
let externals={}

//定义一个变量，里面存储cdn引入的路径
let cdn={
    js:[]
}
//判断是否是生产环境，是的话，开始填入忽略包的名字，cdn路径的引入
if(isProd){
    externals={
        "vue":"Vue",
        "element-ui":"ELEMENT",
        "xlsx":"XLSX"
    }
    //cdn路径可以到BootCDN去找对应版本的地址
    cdn={
        js:[
          'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/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 相关
        ]
    }
}

在vue.config.js内的configureWebpack对象下，填入externals

在vue.config.js内的configureWebpack对象同级的chainWebpack方法内配置cdn

回到public的index.html下，引入配置cdn

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

到此为止，整个cdn配置完成，就可以运行打包命令进行打包啦！！

（可以按照自己项目的需求，看看哪些需要使用cdn进行引入~）