Description
Description
The Babel configuration in build-system/babel-config/unminified-config.js can be optimized for better maintainability, compatibility, and performance.
Identified Issues:
1. ESM Target Configuration (targets)
• Uses browsers: ['Last 2 versions'], which may not provide optimal coverage. Suggest switching to browserslist.
2. Use of loose: true in presetEnv
• This setting can generate non-standard JavaScript, potentially causing issues in strict environments.
3. Potentially Unused Babel Plugins
• Some plugins, like babel-plugin-transform-json-configuration, may be redundant or unnecessary. A dependency audit is recommended.
4. Hardcoded JSX Pragma (Preact Dependency)
• Forces Preact.createElement, limiting compatibility with React-based builds. Making it configurable would improve flexibility.
5. Missing Validation for opt_replacePluginOverrides
• No input validation, which could lead to runtime errors if an invalid value is passed.
Suggested Fixes:
• Replace browsers: ['Last 2 versions'] with browserslist for better browser targeting.
• Remove loose: true unless strictly necessary.
• Audit and remove unused Babel plugins to reduce complexity.
• Make JSX pragma configurable instead of forcing Preact.
• Add validation for opt_replacePluginOverrides to prevent unexpected errors.
Reproduction Steps
Reproduction Steps
1. Check Babel Configuration
• Open build-system/babel-config/unminified-config.js.
• Review the settings for targets, loose, and plugins.
2. Run the Build Process
• Execute:
amp build
• Observe the build logs for unexpected behavior.
3. Analyze Transpiled Output
• Check if loose: true produces non-standard JavaScript.
• Identify unused or redundant Babel plugins.
• Verify if JSX pragma (Preact.createElement) is enforced.
4. Test Compatibility
• Run the transpiled JavaScript in modern browsers (Chrome, Firefox, Edge).
• Check if ESM and non-ESM builds behave as expected.
5. Compare Performance & Bundle Size
• Measure the output file size.
• Identify potential performance issues from loose mode or unnecessary plugins.
6. Expected vs. Actual Behavior
• Target Browsers: Should use browserslist, but currently uses Last 2 versions.
• Loose Mode: Should be optional, but it’s enabled by default.
• Plugins: Some may be redundant or unnecessary.
• JSX Pragma: Should be configurable, but currently forces Preact.createElement.
Relevant Logs
Browser(s) Affected
No response
OS(s) Affected
No response
Device(s) Affected
No response
AMP Version Affected
No response
Activity