生产环境构建

此页面重点介绍使用 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 来捆绑您的项目。The Modern Web 项目维护一个很棒的 Rollup 插件 @web/rollup-plugin-html，它有助于将构建应用程序的许多最佳实践捆绑在一起，形成一个易于使用的软件包。下面介绍了使用此插件的示例配置。

下面注释的 rollup.config.js 文件将构建一个满足 现代浏览器构建要求 和 生产优化 的应用程序，如本页所述。此配置适用于为无需 polyfill 的现代浏览器提供服务。

必需的 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

// Import rollup plugins
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: [
    // Entry point for application build; can specify a glob to build multiple
    // HTML files for non-SPA app
    html({
      input: 'index.html',
    }),
    // Resolve bare module specifiers to relative paths
    resolve(),
    // Minify HTML template literals
    minifyHTML(),
    // Minify JS
    terser({
      ecma: 2021,
      module: true,
      warnings: true,
    }),
    // Print bundle summary
    summary(),
    // Optional: copy any static assets to build directory
    copy({
      patterns: ['images/**/*'],
    }),
  ],
  output: {
    dir: 'build',
  },
  preserveEntrySignatures: 'strict',
};

运行 rollup 构建

rollup -c

编辑此页面