分类 网站前端 下的文章

有时候我们需要在Salesforce页面下载存放为Attachment的文件；或者我们需要把存成Attachment的图片显示在页面上。

内部站点

如果我们文件为Attachment，在Salesforce Internal （即使用Salesforce账户登录的，非Digital Experience, Site.com），则可以使用

 <a href="{!URLFOR($Action.Attachment.Download, attachmentId)}">File Name</a>

下载文件。

或者使用

<img src="{!URLFOR($Action.Attachment.Download, attachmentId)}" />

显示图片。

如果是File，则可以使用Url.getFileFieldURL(entityId, fieldName)

Site.com

Site.com上的则不能用上面的方法，使用的话会直接报错。这时可以通过Salesforce提供的文件下载api /servlet/servlet.FileDownload?file=xxxx~18，不过要注意，一定要使用Salesorce Internal Url，使用Site.com的相关url肯定也会报错。

  1. 首先在后台获取 Salesforce Instance Url 或 Org Domain Url。例如：
    String orgUrl = Url.getOrgDomainUrl().toExternalForm()
  2. 将其传到前台，拼接成下载地址：
    <a href="{!orgUrl + '/servlet/servlet.FileDownload?file=' + attachment.Id}">File Name</a>

参考文档

  1. Visualforce Developer Guide: $Action
  2. Apex Reference Guide: URLClass
  3. stackexchange: How to get salesforce instance url
  4. Salesforce Developer Forum: Download Attachment from Sites??
  5. Salesforce Developer Forum: How to get downloadable link for attachment?

先看原来网站载入性能，Chrome Lighthouse得分6/100，可以说是没分数了：
微信截图_20200909160408.png

我们再看看生成的production环境js包大小：
微信截图_20200909203815.png

基本上违背了所有的前端最佳实践：

  1. 太多第三方Script （3.05MB）
  2. 整体JS体积太大了，一共13MB。而Opera Mini浏览器总共不过12.5MB，这个网站光js就比一个浏览器大。。
  3. 整体CSS体积太大了，4MB。
  4. 没有预加载等功能，整个网站需要下载玩这接近20MB数据，才能加载出来。

这个网站是Angular Cli 1.x的，首先升级到了1.7.4，将后端一些无用的接口删除，同时解决了大部分兼容问题，删去过不用和过时的package。然而似乎效果不大：
微信截图_20200912180931.png

由于Angular目前大版本号已经是10了，而1.7.4还是3年前的4。经过几年发展，已经跟以前很不一样。于是准备更新一下到9（考虑到兼容性）。但是也许是高估了Angular的向前兼容性或者1000+ Package的向前兼容性。升级到Angular Cli 9以后，经过两天接近30小时的修正，仍然运行不起来。太多地方要修改。。。

9.21 更新

可以通过使用 webpack-bundle-analyzer来分析build之后的包大小以及内容：

  1. 安装，为了防止不在PATH中，全局安装：npm i -g webpack-bundle-analyzer
  2. 创建stats.json，在build时增加一个--stats-json参数：
    ng build --prod --stats-json
  3. 分析：webpack-bundle-analyzer dist/stats.json（假如发布的文件夹为dist）

可以得到下图：
bundle-ana.png

开启Gzip压缩传输内容，提高加载速度

由于网站的scripts和css一共将近17MB，不压缩传输实在是太忙了。发现IIS的确没有压缩，因为果断开启：

  1. 安装动态压缩功能和静态压缩功能
  2. 在IIS中开启相关设置

然后增加了22分呢：
微信图片编辑_20200922133633.jpg

9.22更新

秋分，发现用到了Salesforce的quill，并且在Angular的angular-cli.json配置里面。文件中的scripts全部都会被打包放入scripts.bundle.js作为全局scrpts。但是实际上只有一个demo页面，Primeng的p-editor在使用，果断删除。ng build --prod之后，scripts.bundle.js的大小缩减为了2.83MB

未完待续。。

https://docs.npmjs.com/cli-commands/prune.html
https://docs.npmjs.com/cli/dedupe
https://www.npmjs.com/package/@angular/compiler-cli
https://docs.npmjs.com/cli/shrinkwrap