Ionic framework 网页模板

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

现在我的问题是：

• 是否有一种方法可以组合所有脚本（例如，使用gulp）
• 有没有办法让Stenciljs不包含使用nomodule脚本标记的JS文件？这不是通过网页包解决的

---

模具已经尽力生成优化的捆绑包，这些捆绑包在生产构建中被缩小。我怀疑你能用Webpack进一步缩小这个范围。不要被检查输出文件夹的大小（如果是应用程序，请查看www）所愚弄，因为它并不代表在浏览器中打开应用程序时实际加载的内容的大小

通过简单地连接脚本无法将所有脚本组合成一个脚本，因为这违背了ES模块的本质（每个模块一个文件）。您可以尝试使用

distcustomelements bundle

output target（），它只允许您创建一个包含所有组件的bundle。然而，这是一个dist类型的输出目标，所以你必须弄清楚如何为你的应用程序使用它

模具不会在index.html中嵌入任何

nomodule

脚本标记。也许你的意思是

rel=“modulepreload”

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

（来自）

您的

src/index.html

中唯一的

nomodule

类型脚本是带有应用程序入口点的脚本，用于不支持

type=“module”

的浏览器。默认情况下会添加它，请参见。已经支持ES模块的浏览器将忽略（即未加载）此脚本。然而，删除它取决于您，您的应用程序在任何不支持ES模块的浏览器中都无法工作

如果要放弃对IE11和旧边缘（v18之前）的支持，可以在

stencil.config.ts

中使用

extras

选项，这可能会进一步减小大小：

export const config:config={
建筑5：错误，
额外费用：{
dynamicImportShim:false，
CSSvarshim：错误，
阴影：错，
scriptDataOpts:false，
safari10：错
}
}

（见附件）