Vue项目性能优化、配置CDN加速

CDN（Content Delivery Network，内容分发网络）是一种分布式网络服务，它通过在地理上分散的多个服务器上存储内容的副本，使用户可以从最近的服务器节点获取数据，从而加快内容的加载速度和提高可用性

项目体现: 生产环境打包项目时, 将项目依赖的一些第三方包, 替换成 cdn方式外部加载,从而提升应用的加载、响应速度, (直观感受: vue ui视图可视化,查看前后配置的统计分析)

1. 配置需要CDN加速的模块

vue.config.js 文件配置

externals 用于生产环境时排除打包依赖

module.exports = {
  ...
 
  configureWebpack: (config) => {
   // 生产环境时使用
    if (process.env.NODE_ENV === "production") {
      return {
          configureWebpack: {
            externals: {
              'vue': 'Vue',
              'axios': 'axios',
                //其他的比如element-ui 等自行添加
             } 
           }
    }} }
    
  ...
}

externals里面的值, 是以键值对的形式出现的

键: 引入的包, 比如 element-ui, 'ELEMENT' 是 element-ui 这个库暴露出来的全局对象,

值: 此值为包名暴露的全局对象, 比如 'ELEMENT' 是 element-ui 这个库暴露出来的全局对象,

'Vue' 是 vue 这个库暴露出来的全局对象,

( 也可控制台输出 window 对象查找全局对象 )

2. cdn地址查找

方式1: 通过Bootstrap官网查找

Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为5.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。https://www.bootcss.com/

方式2: 通过 cdnjs官网查找

Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developerscdnjs offers a large collection of popular libraries for JavaScript, CSS and more. Search the full collection and start using them on your website. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.https://cdnjs.com/libraries

注意点:

查找中会出现多个版本, 需要根据项目使用版本去选择

一般选择min.js(完整版) 或者 index.js后缀的即可满足项目需求

比如查找element-ui依赖 ,会有css, js,map , 需要引入css( 不引入样式不生效 ) ,js , map可忽略

3. 项目举例

在项目 ,package.json 中查找 , axios 为1.3.4

通过方式1 网站查找对应的版本

复制 script标签到, 项目 public / index.html 中,将下面代码粘贴进去, js放置在 <div id="app"></div> 下即可, 若有css样式 ,则放置在<head></head>中

   
    <% if(process.env.NODE_ENV === 'production') { %>
    // 引入vue.js 的cdn加速
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- ..添加更多 -->
    <% } %>

这一步操作完, 就结束了, 想看看效果??

vscode 终端输入 vue ui ,唤醒图像化界面

未使用CDN加速前先截屏保留, 配置使用前后 ,一对比就能看到明细的效果了