Scripts: add custom TerserPlugin configuration #22990
Conversation
swissspidy
added
[Type] Enhancement
|
Size Change: +970 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
|
Just adding some reviewers to know whether I'm on the right track here. Odd that the bundle size didn't change, but I thought I saw the comments locally 🤔 |
We use two different configs for the Gutenberg plugin and npm package. So we should either duplicate logic or create a webpack plugin that optimizes i18n handling. |
swissspidy
force-pushed
the
add/wp-scripts-terser-plugin
branch
from
36a5ca3 to
38e8d6b
Compare
| @@ -73,6 +74,19 @@ const config = { | |||
| default: false, | |||
| }, | |||
| }, | |||
| minimizer: [ | |||
| new TerserPlugin( { | |||
There was a problem hiding this comment.
I thought webpack uses terser by default, do we need the extra plugin to configure it properly?
There was a problem hiding this comment.
It does with the default options. But to customize the options you have to pass your own TerserPlugin instance.
There was a problem hiding this comment.
This seems to work for me. Steps to test:
- Run
npm run package-plugin - Extract the ZIP file and cd into the new
gutenbergdirectory - Run
php -d memory_limit=512M "$(which wp)" i18n make-pot . --ignore-domain(requires WP-CLI to be installed) - Open
gutenberg.potin an editor - Search for
(%s: color %s)
Result:
#. translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
#: build/block-editor/index.js:6
msgid "(%s: color %s)"
msgstr ""(Unrelated to this PR but this should use numbered placeholders.)
The source file looks like this:
The only thing I'm not sure about is whether this should be part of @wordpress/scripts or not since it appears to only affect the plugin itself due to not including the source files in the plugin.
|
We probably need a similar patch on Core right? |
Core already bundles an unminified version of the files which include the comments, see wp-includes/js/dist/blocks.js for example. |
Any plugin developer using
Is this done via some custom implementation? If so, can you remove it now that the built packages will include the comments out oft the box? |
|
If needs a rebase now and you can merge it afterwards. |
| sourceMap: ! isProduction, | ||
| terserOptions: { | ||
| output: { | ||
| comments: /translators:/i, |
There was a problem hiding this comment.
Just found this. Why would we want to keep the translators comments in our production builds? I thought they're only used on our source code?
There was a problem hiding this comment.
They are needed because the production builds are the ones that are scanned for any translation function calls and made available on translate.wordpress.org.
There was a problem hiding this comment.
It's really all explained in the ticket this PR addresses: #19006
There was a problem hiding this comment.
Oh cool! Probably worth a comment here though. Thanks for the info 👍!
Description
Updates webpack configuration to preserve translator comments in minified output.
Fixes #19006.
How has this been tested?
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: