者：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加載確實有可能阻塞頁面加載，但通過一些優化策略和技術，我們可以減輕或避免這種阻塞。選擇哪種策略取決于你的具體需求和約束。