生产构建

本页面主要介绍使用 Lit 组件构建_应用程序_用于生产环境的建议。有关在将可重用的 Lit _组件_发布到 npm 之前对源代码执行的构建步骤的建议，请参见发布。

在构建包含 Lit 组件的应用程序时，你可以使用常见的 JavaScript 构建工具，如 Rollup 或 webpack，来准备源代码和依赖项以在生产环境中提供服务。

有关构建 Lit 代码的完整要求列表，请参见要求，这些要求适用于开发和生产环境。

除了这些最低要求外，本页面还描述了在准备生产代码时应考虑的优化，以及实现这些优化的具体 Rollup 配置。

Lit 项目可以从与其他 Web 项目相同的构建时优化中受益。在生产环境中提供 Lit 应用程序时，建议进行以下优化：

• 打包 JavaScript 模块以减少网络请求（例如，使用 Rollup 或 webpack）。
• 压缩 JavaScript 代码以减小负载大小（Terser 适用于 Lit，因为它支持现代 JavaScript）。
• 向现代浏览器提供现代代码，因为它通常更小更快，并在旧版浏览器上回退到编译后的代码。
• 对静态资产（包括打包的 JavaScript）进行哈希处理，以便更容易地使缓存失效。
• 启用服务时压缩（如 gzip 或 brotli）以减少传输的字节数。

此外，请注意，由于 Lit 模板是在 JavaScript 模板字符串字面量中定义的，它们不会被标准的 HTML 压缩器处理。添加一个压缩模板字符串字面量中的 HTML 的插件可以适度减小代码大小。有几个包可以执行此优化：

• Rollup：rollup-plugin-minify-html-literals
• Webpack：minify-html-literals-loader

有许多工具可以执行提供 Lit 代码所需的必要和可选构建步骤，Lit 不要求使用任何特定工具。但是，我们推荐使用 Rollup，因为它设计用于处理标准的 ES 模块格式，并输出利用客户端原生模块的最优代码。

有很多方法可以设置 Rollup 来打包你的项目。Modern Web 项目维护着一个优秀的 Rollup 插件 @web/rollup-plugin-html，它有助于将许多构建应用程序的最佳实践整合到一个易于使用的包中。下面描述了使用此插件的示例配置。

下面带注释的 rollup.config.js 文件将构建一个满足现代浏览器构建要求和生产优化的应用程序。此配置适用于可以运行 ES2021 JS 而无需 polyfills 的现代浏览器。

所需的 node 模块：

npm i --save-dev rollup \
  @web/rollup-plugin-html \
  @web/rollup-plugin-copy \
  @rollup/plugin-node-resolve \
  @rollup/plugin-terser \
  rollup-plugin-minify-html-literals \
  rollup-plugin-summary

rollup.config.js:

// 导入 rollup 插件
import html from '@web/rollup-plugin-html';
import {copy} from '@web/rollup-plugin-copy';
import resolve from '@rollup/plugin-node-resolve';
import {terser} from '@rollup/plugin-terser';
import minifyHTML from 'rollup-plugin-minify-html-literals';
import summary from 'rollup-plugin-summary';

export default {
  plugins: [
    // 应用程序构建的入口点；可以指定 glob 来构建非 SPA 应用的多个 HTML 文件
    html({
      input: 'index.html',
    }),
    // 将裸模块说明符解析为相对路径
    resolve(),
    // 压缩 HTML 模板字面量
    minifyHTML(),
    // 压缩 JS
    terser({
      ecma: 2021,
      module: true,
      warnings: true,
    }),
    // 打印打包摘要
    summary(),
    // 可选：将任何静态资产复制到构建目录
    copy({
      patterns: ['images/**/*'],
    }),
  ],
  output: {
    dir: 'build',
  },
  preserveEntrySignatures: 'strict',
};

运行 rollup 构建：

rollup -c