者：Tam Hanna

转发链接：https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site

preadJS v14 新版在线表格编辑器可以放便的集成到Vue等框架，只需要一个组件或者几行代码就能在现有工程中集成在线Excel的功能。如果项目不做任何配置集成设计器组件，会让框架大的发布包增大，导致页面首屏加载变慢。下面以Vue 2为例介绍如何进行设计器加载优化。

文末点击“了解更多”获取工具

示例环境：Vue 2.6、Vue-cli 4.5 + TypeScript 3.9

推荐两种做法，可以根据实际情况选择使用：

1. CDN加速

在Vue中可以将基础组件vue、vuex、vue-router等组件采用cdn引入，通过浏览器的异步加载，以及打包排出以上组件来加速。

同样，如果很多页面都使用了SpreadJS 或者 Designer，也可以将SpreadJS 资源通过cdn或者静态资源的方式引入。

<font size="1"> <scriptsrc="lib/spreadjs/scripts/gc.spread.sheets.all.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/interop/gc.spread.excelio.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.print.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.pdf.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.charts.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.sheets.shapes.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.pivot.pivottables.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/plugins/gc.spread.calcengine.languagepackages.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/scripts/resources/zh/gc.spread.sheets.resources.zh.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/designer/scripts/gc.spread.sheets.designer.resource.cn.14.0.1.min.js"type="text/javascript"></script>
<scriptsrc="lib/spreadjs/designer/scripts/gc.spread.sheets.designer.all.14.0.1.min.js"type="text/javascript"></script></font>

引入后GC对象会挂在window，在通过new Workbook 和Designer的方式就可以初始化表格或者设计器了。

使用此种方式不需要集成SpreadJS对Vue支持的封装，按照原生JS的使用方式即可，比较方便。访问所有页面都要加载资源，对于直接访问没有使用SpreadJS 页面会造成资源浪费。当然也可以在组件加载时动态注入script引用，监听loaded再进行操作，这样就有些繁琐不如直接使用方案2了。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'))

vardesigner=newGC.Spread.Sheets.Designer.Designer(
document.getElementById('ssDesigner'),/**设计器容器*/
designerConfig,//自定制配置*/,
undefined/**默认workbook对象，可以不设置*/
);

2. 路由懒加载+组件懒加载

Vue Route和Component都提供了懒加载的方式，实现按需异步加载。

上面代码中将About和WebExcel两个View配置为了懒加载模式，这两个组件会按照指定的webpackChunkName单独打包，加载首页进入Home页面的时候不会加载webExcel，只有当访问webExcel路由的时候才请求，而且请求一次之后，后续再访问也不会再请求了。这样首屏加载只需要加载Vue框架资源和Home组件。

清理网络请求记录，点击Web Excel，访问webExcel页面，此时会请求webExcel资源并展示组件。

实现了路由懒加载，还可使用组件懒加载，进一步优化webExcel页面的体验。将在线表格编辑器封装到Designer组件中，WebExcel页面异步加载这个组件。

在WebExcel页面中使用Designer组件，通过diplayDesigner控制是否显示。

WebExcel中使用AsyncComponent的方式引入Designer组件，页面加载完成3秒后设置diplayDesigner为true来展示Designer组件，Designer 加载是使用LoadingComponent提示用户正在loading。

可以从网络请求中看到，webExcel加载完3秒后开始请求designer资源，请求时显示LoadingComponent，请求完毕展示Desinger 组件。

只要Designer的资源加载一次后，后续如何切换路由或者其他页面也使用了Designer，都不会再次加载了。路由懒加载并不一定使用，如果Designer主要功能，那么懒加载Designer就没有必要了。

Vue-cli在打包时还使用了preload和prefetch预加载机制，前面示例中为了演示清晰我注释了相关配置。

首页实际请求，部分资源为预加载。

除了以上内容还可以开启服务器gzip压缩传输减少懒加载请求时间。

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

本文转载自葡萄城

SS加载确实有可能阻塞页面加载，但这并非绝对，具体取决于CSS的加载方式、应用位置以及浏览器的渲染机制。在了解CSS加载如何影响页面加载之前，我们先要明白浏览器渲染页面的基本流程。

浏览器在加载网页时，会按照从上到下的顺序解析HTML文档。当浏览器遇到`<link>`标签引用外部CSS文件时，它会停止HTML的解析，转而加载并应用这个CSS文件。这个过程被称为CSS阻塞。因此，如果这个CSS文件很大或者加载速度很慢，用户可能会看到一个空白页面，直到CSS文件完全加载并应用。

然而，有几种方法可以避免或减轻CSS加载对页面加载的阻塞：

1. 异步加载CSS：通过将CSS文件的加载设置为异步，可以确保HTML解析不会被阻塞。这可以通过在`<link>`标签中添加`rel="async"`属性来实现。这样，浏览器会在后台加载CSS文件，而不会停止HTML的解析。
2. 内联CSS：将CSS代码直接写在HTML文件中，而不是通过外部文件引用，可以避免网络请求造成的延迟。但是，这会增加HTML文件的大小，可能导致其他性能问题。
3. 使用CSS-in-JS库：一些库，如Styled Components或Emotion，允许你在JavaScript中编写CSS。这种方法可以动态生成样式，但也可能增加JavaScript的复杂性。
4. 分割CSS：将CSS文件分割成多个小文件，每个文件只包含一部分样式。这样，即使某个文件加载较慢，也不会阻塞整个页面的渲染。
5. 利用媒体查询：通过媒体查询，你可以根据设备的特性（如屏幕大小、分辨率等）加载不同的CSS文件。这样，用户只会下载并应用他们真正需要的样式。
6. 预加载和预获取：使用`<link rel="preload">`和`<link rel="prefetch">`可以告诉浏览器提前加载CSS文件。虽然这并不能阻止CSS阻塞，但它可以确保文件在需要时立即可用。

此外，值得注意的是，现代浏览器通常具有一些优化机制，如并行下载、缓存等，这些都可以帮助减少CSS加载对页面加载的影响。

总的来说，CSS加载确实有可能阻塞页面加载，但通过一些优化策略和技术，我们可以减轻或避免这种阻塞。选择哪种策略取决于你的具体需求和约束。