如何用Rollup打包含HTML/CSS/JS的Lightning Web Component？

所需Rollup插件 #

• @rollup/plugin-node-resolve：解析ES模块依赖，处理LWC可能用到的外部模块
• @rollup/plugin-commonjs：将CommonJS格式的依赖转译为ES模块，兼容Rollup的打包逻辑
• rollup-plugin-html：将LWC的HTML模板文件转为字符串，允许通过import引入到JS中
• rollup-plugin-postcss：处理CSS文件，支持LWC的作用域样式，可选择将CSS注入JS或单独输出
• rollup-plugin-terser：压缩JS代码，模拟生产环境下的最终打包体积
• rollup-plugin-size-snapshot：生成打包体积快照，直接展示各模块的体积占比；或用rollup-plugin-visualizer生成可视化体积分析报告

安装依赖 #

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-html rollup-plugin-postcss rollup-plugin-terser rollup-plugin-size-snapshot

Rollup配置文件（rollup.config.js） #

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import html from 'rollup-plugin-html';
import postcss from 'rollup-plugin-postcss';
import terser from 'rollup-plugin-terser';
import sizeSnapshot from 'rollup-plugin-size-snapshot';

export default {
  // 入口文件：LWC组件的主JS文件
  input: 'src/myComponent.js',
  output: {
    // 输出目录和文件名
    file: 'dist/myComponent.bundle.js',
    // 输出格式：IIFE适合浏览器直接运行，ES适合模块引入
    format: 'iife',
    // 暴露全局变量（如果需要在浏览器全局访问组件）
    name: 'MyLWCComponent'
  },
  plugins: [
    // 解析Node模块，适配浏览器环境
    resolve({
      browser: true,
      extensions: ['.js', '.html', '.css']
    }),
    // 转译CommonJS模块为ES模块
    commonjs(),
    // 处理HTML模板，压缩空白和注释
    html({
      include: 'src/**/*.html',
      htmlMinifierOptions: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
    // 处理CSS，注入到JS中并压缩
    postcss({
      inject: true,
      minimize: true,
      extensions: ['.css']
    }),
    // 压缩JS代码
    terser(),
    // 生成体积快照文件
    sizeSnapshot()
  ]
};

调整LWC组件代码 #

将LWC默认的模板/样式关联方式改为Rollup支持的import语法：

// src/myComponent.js
import { LightningElement } from 'lwc';
// 导入HTML模板
import template from './myComponent.html';
// 导入CSS样式
import './myComponent.css';

export default class MyComponent extends LightningElement {
  // 指定组件渲染模板
  render() {
    return template;
  }
}

打包与体积测量 #

1. 在package.json中添加打包脚本：

{
  "scripts": {
    "build": "rollup -c",
    "build:visualize": "rollup -c --plugin rollup-plugin-visualizer"
  }
}

2. 执行基础打包：

npm run build

执行后会在dist目录生成打包文件，同时在项目根目录生成size-snapshot.json，包含各模块的体积明细。

3. 可视化体积分析（可选）：
   安装rollup-plugin-visualizer后执行npm run build:visualize，会生成stats.html文件，打开后可直观查看各模块的体积占比。

注意事项 #

• LWC样式作用域：rollup-plugin-postcss默认保留CSS的作用域属性，无需额外配置即可兼容LWC的样式隔离逻辑。
• Tree Shaking：Rollup默认支持Tree Shaking，自动剔除未使用的代码，确保体积测量的准确性。
• 环境适配：如果需要模拟Salesforce运行环境，可添加@lwc/rollup-plugin；仅测量组件本身体积时，上述基础配置足够。

内容的提问来源于stack exchange，提问作者Vignesh Pethuraj