一、前言
今天像往常一样，开开心心的打代码编程。
前端部署之后，访问页面，空白？
我相信这种场景很多同胞都有遇到过。
于是便有了今天这篇文章，一起来探讨一下。
当然，你也可以当做面试题。
二、分析
访问页面出现空白：
前端代码逻辑语法有问题，如xx.bb，当xx为空，则报错导致下面不执行。
某个文件加载很慢，后面的资源一直在等他。
排查之后，在nginx配置了拦截超过5m的文件，而前端chunk.js却是7M。
直接把文件拦截了，文件没加载，自然空白页面。
聪明的你，很快就想到了把nginx拦截设置大点不就可以了吗？
但你想一下，或许也知道，为什么后端要设置这么大，应该有他的道理。
行，这个问题，由牛逼的前端来解决。
没办法，谁让公司离开了前端就转不起来了呢。
前端的chunk.js尝试一下分若干个js文件加载。
在vue.config.js
configureWebpack: (config) => {
config.optimization.splitChunks = {
chunks: 'all',
maxSize: 1000000, // 设置拆分的文件大小阈值，单位是字节，1M
}
}
值得注意的是：
调整 maxSize：将 maxSize 设置为 1MB 可能导致频繁拆分文件，生成大量小文件。考虑调整为 200KB 或 500KB，以保持文件适中。
优化网络请求：文件分割可能增加网络请求次数。检查服务器响应时间和网络状况，确保请求不会导致显著延迟。
改进文件缓存策略：实施有效的缓存策略，使浏览器在后续加载时能够从缓存中快速获取文件，减少网络请求时间。
考虑文件合并：若使用多个小文件，可以调整 splitChunks 的相关选项，或使用 webpack-bundle-analyzer 工具分析并优化打包结果。
利用 CDN 和缓存：使用 CDN 可以显著加快静态资源的加载速度，确保静态资源正确缓存和分发，以提升访问效率。
我们来看看打包出来的文件。
访问页面的时候，基本不会因为大文件而卡住了。
如果某个js卡住了页面，尝试使用async异步加载。
三、productionSourceMap
项目（内网）中一直有开map方便调试，本来想尝试一下把map文件禁止输出，是不是会加载页面快一点。
productionSourceMap: false
MAP 文件（Source Map 文件）用于将编译后的代码映射回原始源代码，主要为调试提供便利，帮助开发者轻松查找和修复代码错误。
虽然禁止输出或从生产环境中移除 MAP 文件可以减少额外的文件加载，但对页面加载速度的影响通常微乎其微。浏览器在正常运行时并不使用这些文件，主要在开发和调试过程中发挥作用。
移除 MAP 文件有助于减少服务器存储需求，并降低安全风险（防止用户查看源代码），但对页面加载速度的提升效果不显著。如果加载速度是首要关注点，优化代码、压缩资源和实施有效的缓存策略可能更为有效。
至此撒花~
