Question

我的网站上有一个页面，该页面需要两个脚本，即JQuery和我创建的一个自定义元素，该自定义元素比使用JQuery向服务器请求数据还要一个css文件。我在徘徊，是否有办法通过在HTML页面旁边发送脚本，数据和CSS而不是等待客户端请求它们来最大程度地减少加载时间。

对于服务器端，我将node.js与express.js结合使用，对于客户端，我没有框架，仅使用JQuery。

Answer 1

除了缓存资源（使用浏览器内置的开发人员工具，例如localStorage或sessionStorage）之外，还可以考虑对资产使用压缩算法，例如gzip或{{3 }}（推荐）

有两种方法可以直接在Express中实现压缩（无需任何Web服务器，即apache，nginx等）：

借助Webpack（任何其他前端任务运行器或生成器）静态构建压缩文件，并根据客户需要按需提供。
在运行时动态构建压缩文件（您可以使用require(‘compression’)）在express中动态压缩文件并动态提供给客户端。

使用Gzip

引自brotli

Gzip压缩可以大大减小响应主体的大小，从而提高Web应用程序的速度。在Express应用中将压缩中间件用于gzip http://expressjs.com/en/advanced/best-practice-performance.html。例如：

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

使用Brotli（推荐）

引自compression

通过遵循此方法，您需要安装https://codeburst.io/express-brotli-webpack-a60773e7ec6c（模块捆绑器）

您可以包括这两个插件webpack和compression-webpack-plugin

const CompressionPlugin = require(‘compression-webpack-plugin’)
const BrotliPlugin = require(‘brotli-webpack-plugin’)
module.exports = {
   plugins: [
    new CompressionPlugin({
       asset: ‘[path].gz[query]’,
       algorithm: ‘gzip’,
       test: /\.js$|\.css$|\.html$/,
       threshold: 10240,
       minRatio: 0.8
    }),
    new BrotliPlugin({
       asset: ‘[path].br[query]’,
       test: /\.js$|\.css$|\.html$/,
       threshold: 10240,
       minRatio: 0.8
    })
  ]
}

这些插件将为您的所有捆绑软件生成gzip和brotli文件，即，如果捆绑软件名称为vendor_d0cfe49e718c1366c661.js，您将得到vendor_d0cfe49e718c1366c661.js.gzip和vendor_d0cfe49e718c1366c661.js.br在同一目录中（假设截至目前为/dist/static/vendor_d0cfe49e718c1366c661.js.*）。

PS：以上代码仅在压缩文件时达到.gzip的情况下才会生成.br和minRatio: 0.8。因此，如果文件很小，将不会生成gzip和br文件。原因是压缩和解压缩的时间比不压缩的实际文件要贵。

有什么方法可以通过发送您知道将被请求的数据来减少获取请求所浪费的时间？

1 个答案:

使用Gzip

使用Brotli（推荐）