本文主要介绍了cdn加速在项目中的实现，以及使用Lighthouse对前端性能指标进行监测打分。

Lighthouse简介

Lighthouse是谷歌开发并开源的web性能测试工具，用于改进网络应用的质量，可以将其作为一个Chrome扩展程序运行，或从命令行运行。只需要为其提供一个需要审查的地址，Lighthouse就会对页面进行一连串的测试，生成一个有关页面性能的报告。

在浏览器的调试工具中默认就存在lighthouse选项，只需要切换至lighthouse，在右侧的选项区选中需要的选项。点击生成报告。

从报告中可以看出某网站的首屏时间是0.6s，可交互时间是1.5s，总阻塞时间是10ms。最大绘制时间是1s。通过这些性能指标就可以看到在哪方面存在性能瓶颈。

在下方会对渲染进行拍照截图，如果空白页面较多也能体现网站白屏时间过长。下面还会给一些优化建议。比如某些资源过大，加载时间过长等，当然这些建议不并一定都是对的，只是一些建议。

接下来我们就使用Lighthouse对项目进行监测衡量，使用cdn静态资源，对项目进行优化加速。

CDN静态资源加速实现

vue3 项目代码改造

// vue.config.js
const CDN = {
  js: [
    'https://unpkg.com/vue@3.2.13/dist/vue.global.prod.js',
    'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.14/vue-router.global.prod.js',
    'https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js',
    'https://unpkg.com/pinia@2.0.13/dist/pinia.iife.prod.js',
    'https://unpkg.com/axios@0.26.1/dist/axios.min.js',
    'https://unpkg.com/element-plus@2.1.7/dist/index.full.min.js',
  ],
  css: [
    'https://unpkg.com/element-plus@2.1.7/dist/index.css',
  ]
}
const objExternals = {
  vue: 'Vue',
  'element-plus': 'ElementPlus',
  'vue-router': 'VueRouter',
  'pinia': 'Pinia',
  'axios': 'axios'
}
module.exports = {
chainWebpack: config => {
    // 配置，将当前页定义的cdn值传到主页面（index.html）
    config.plugin('html').tap(args => {
      // 这里我是除本地环境，其余均使用CDN，可自己选择是否配置
      args[0].cdn = process.env.NODE_ENV === 'development' ? {} : CDN
      return args;
    });
  },
configureWebpack: {
    ...
    // 定义webpack打包配置
    externals: process.env.NODE_ENV === 'development' ? {} : objExternals,
},
}


// public文件夹下 index.html 添加如下代码
<head>
...
  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
  <% } %>
  <title><%= htmlWebpackPlugin.options.title %></title>
  <% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</head>

行云环境下相关配置改造

行云子应用编译后只生成index.js，没有index.html，新版的plugin-webpack支持修改index.js，可以优先加载外部资源。

but！结果是失败的，外部资源加载到最外层的行云基座上，vue版本、全局的css样式等会直接影响到所有的行云子应用。需要后续行云优化，增加沙箱隔离。

所以，这里只做一个演示，而不做更深层次的优化完善。

文档链接： JModule

// plugin-webpack 依赖需升级到0.4.4版本 
// "@jmodule/plugin-webpack": "^0.4.4",


// .jmodule.conf.js
 const cdnJsList = [
   'https://unpkg.com/vue@3.2.13/dist/vue.global.prod.js',
   'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.14/vue-router.global.prod.js',
   'https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js',
   'https://unpkg.com/pinia@2.0.13/dist/pinia.iife.prod.js',
   'https://unpkg.com/axios@0.26.1/dist/axios.min.js',
   'https://unpkg.com/element-plus@2.1.7/dist/index.full.min.js',
 ]
 const cdnCssList = [
  'https://unpkg.com/element-plus@2.2.17/dist/index.css'
 ]
 module.exports = {
   mode: 'modules',
   assetsModifier: (assetsJson) => {
     assetsJson.js = cdnJsList.concat(assetsJson.js)
     assetsJson.css = cdnCssList.concat(assetsJson.css)
     return assetsJson
   }
 };

CDN加速改造前后数据对比

使用的项目：流水线-镜像市场

我们从三个维度进行衡量：打包大小、打包用时、lighthouse性能评分

改造前

打包大小

打包用时

// 各模块打包计时插件 speed-measure-webpack-plugin
// 下载依赖
npm i speed-measure-webpack-plugin


// vue.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
   ...
}),
}

打包结果如图，统计五次次打包数据：