Webpack Stenciljs PWA

Question

我需要缩小一个使用Webpack的项目的Stenciljs PWA的大小。Stenciljs创建了几个JS文件，并将它们嵌入index.html文件中作为nomodule脚本标记。

现在我的问题是：

• 有没有办法将所有脚本(例如，与gulp)结合起来？
• 有没有一种方法可以让Stenciljs不使用nomodule脚本标记来包含JS文件？webpack并没有解决这个问题。

Answer 1

模具已经尽了最大的努力来生成优化的包，这些包在生产构建中被缩小了。我怀疑你能否在Webpack的帮助下进一步缩小这一点。不要被检查输出文件夹的大小(如果是应用程序)所愚弄，因为它并不代表在浏览器中打开应用程序时实际加载的内容的大小。

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

模板不会将任何nomodule脚本标记嵌入到index.html中。也许你是说rel="modulepreload"

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

(来自https://ionicframework.com/blog/announcing-stencil-one-beta/)

在您的nomodule-type脚本中，只有在不支持type="module"的浏览器中为应用程序提供入口点的脚本。默认情况下添加，请参见src/index.html#L22。这个脚本将被已经支持ES模块的浏览器忽略(即不加载)。不管你如何删除它，你的应用程序在任何不支持ES模块的浏览器上都不能工作。

如果要删除对IE11和旧边缘的支持(在v18之前)，可以在stencil.config.ts中使用extras选项，这可能会进一步缩小大小：

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

(见https://stenciljs.com/docs/config-extras)