项目优化的几个方面项目优化的几个方面：项目体积分析项目部署在服务器中后，在首次访问项目时，会出现一小段时间的”白屏期

项目优化的几个方面：

项目体积分析

项目部署在服务器中后，在首次访问项目时，会出现一小段时间的”白屏期“。这个并不是报错问题，而是因为某些资源过大，加载资源时间长，引起的页面阻塞。可以通过控制台，查看 Size 和 Time 观察资源大小，和加载时长。

重点关注 chunk-vendors 和 app.js 两个文件。

chunk-vendors 是打包项目引用的 node_modules 第三方包文件，如，elementPlus, vue, router, dayjs, axios 等。;

app 文件是 src 目录下与项目相关的资源，如果 views, components等。

chunk-vendors 会随着更多第三方包的引入，逐渐变大，那么整个项目加载的速度会更慢。

我们虽然知道项目的文件大小，但并不知道是哪些资源导致文件过大，这时就要借助第三方工具 webpack-bundle-analyzer。

CDN 加速外部资源

关键词：就近获取所需内容，降低网络拥塞，提供用户访问的响应速度和命中率

<!-- public/index.html -->

<head>

    <!-- Import Vue 3 指定版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.13/dist/vue.global.min.js"></script>
    <!-- Import Element Plus 组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/element-plus@2.9.0/dist/index.full.min.js"></script>

</head>

module.exports = defineConfig({
    configureWebpack: (config) => {
        config.externals = {
            vue: "Vue", // vue 为包名称， "Vue" 为全局变量
            "element-plus": "ElementPlus", // element-plus 为包名称， "ElementPlus" 为全局变量
            wangeditor: "wangEditor", // wangeditor 为包名称， "wangEditor" 为全局变量
            "@element-plus/icons-vue": "ElementPlusIconsVue", // @element-plus/icons-vue 为包名称， "ElementPlusIconsVue" 为全局变量
        };
    }
})

2.1 要了解一个 CDN 文件的全局变量是什么，可以通过以下几种方法：

方法 1: 查看官方文档或仓库

通常，库的官方文档会说明全局变量的名称。例如：

Vue 3 的全局变量是 Vue。 Element Plus 的全局变量是 ElementPlus。

方法 2: 检查源码

打开对应的 CDN 文件（例如 unpkg.com/element-plu…

全局变量声明：通常在文件的开头或结尾会有类似以下的代码：

window.ElementPlus = ...

UMD 包导出：如果文件是 UMD 格式，会有类似的代码：

(function(global, factory) {
    // UMD 导出
    global.ElementPlus = factory();
})(this, function() {
    ...
});

方法 3: 使用浏览器调试工具

打开浏览器的开发者工具（F12）。
在 Console 中加载对应的脚本文件。例如：

var script = document.createElement('script');
script.src = "https://unpkg.com/element-plus@2.9.1/dist/index.full.js";
document.body.appendChild(script);

加载后，在 Console 中检查全局变量：

console.log(window.ElementPlus); // 检查是否存在

方法 4: 使用工具检测

借助工具如 JSDelivr API 或 Unpkg API，可以分析某些库的元信息。例如，通过 unpkg.com/element-plu… 查看其导出配置。

图片压缩

Tinypng

结论：

大型项目使用 CDN 好像优化效果也没有那么明显，几十Kb 的资源大小也是微乎其微，具体情况具体分析；
图片占用资源比较大，图片压缩优化效果明显。