时间戳

首页 > 解决方案 > Webpack Stenciljs PWA

ionic-framework - Webpack Stenciljs PWA

问题描述

我需要为使用 Webpack 的项目减小 Stenciljs PWA 的大小。Stenciljs 编译器创建几个 JS 文件并将它们作为 nomodule 脚本标签嵌入到 index.html 文件中。

现在我的问题：

标签： ionic-frameworkwebpackstenciljs

解决方案

Stencil 已经尽最大努力生成优化的捆绑包，这些捆绑包在生产构建中被缩小。我怀疑您是否能够使用 Webpack 进一步缩小这一点。不要被检查输出文件夹的大小（www如果它是一个应用程序）所迷惑，因为它并不代表您在浏览器中打开应用程序时实际加载的大小。

没有办法通过简单地连接脚本将所有脚本组合成一个，因为这违背了 ES 模块的本质（每个模块一个文件）。您可以尝试dist-custom-elements-bundle输出目标 ( https://stenciljs.com/docs/custom-elements )，它只允许您创建一个包含所有组件的包。但是，这是一个 dist 类型的输出目标，因此您必须弄清楚如何为您的应用程序使用它。

Stencil 不会nomodule在您的 index.html 中嵌入任何脚本标签。也许你的意思是rel="modulepreload"？

此外，编译器收集的所有元数据和 rollup 生成的依赖图可用于自动创建“modulepreload”链接，将下载关键路径中所有 JS 所需的网络往返次数减少到零。这大大减少了使用 Stencil 构建的应用程序的交互时间。

（来自https://ionicframework.com/blog/announcing-stencil-one-beta/）

您的唯一nomodule-type 脚本是src/index.html您的应用程序的入口点，用于不支持的浏览器type="module"。它是默认添加的，请参见src/index.html#L22。该脚本将被已经支持 ES 模块的浏览器忽略（即不加载）。但是，删除它取决于您，您的应用程序将无法在任何不支持 ES 模块的浏览器中运行。

如果您想放弃对 IE11 和旧 Edge（v18 之前）的支持，可以使用 中的extras选项stencil.config.ts，这可能会进一步减小大小：

export const config: Config = {
  buildEs5: false,
  extras: {
    dynamicImportShim: false,
    cssVarsShim: false,
    shadowDomShim: false,
    scriptDataOpts: false,
    safari10: false
  }
}

（见https://stenciljs.com/docs/config-extras）

推荐阅读