Liferay 7：如何在Portlet层面压缩JS文件？

Since your JS is tightly coupled to the portlet and can't be moved to the theme, here are three reliable ways to automate compression during deployment:

Option 1: Minify During Build with Maven/Gradle #

This is the most controllable approach, integrating directly into your build pipeline before deployment.

Maven Setup #

Add the minify-maven-plugin to your pom.xml to shrink your JS file during the process-resources phase:

<build>
    <plugins>
        <plugin>
            <groupId>com.samaxes.maven</groupId>
            <artifactId>minify-maven-plugin</artifactId>
            <version>1.7.6</version>
            <executions>
                <execution>
                    <id>minify-portlet-js</id>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>minify</goal>
                    </goals>
                    <configuration>
                        <jsSourceDir>src/main/resources/META-INF/resources/js</jsSourceDir>
                        <jsSourceFiles>
                            <jsSourceFile>your-big-custom.js</jsSourceFile>
                        </jsSourceFiles>
                        <jsTargetDir>target/classes/META-INF/resources/js</jsTargetDir>
                        <jsFinalFile>your-big-custom.min.js</jsFinalFile>
                        <compress>true</compress>
                        <closureCompilationLevel>SIMPLE</closureCompilationLevel>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

Don't forget to update your portlet's JSP/view to reference the .min.js file instead of the original.

Gradle Setup #

Use the Node.js plugin with uglify-js for minification:

1. Add the plugin to build.gradle:

plugins {
    id "com.github.node-gradle.node" version "3.5.1"
}

2. Create a minify task:

task minifyPortletJS(type: NodeTask) {
    script = file("node_modules/uglify-js/bin/uglifyjs")
    args = [
        "src/main/resources/META-INF/resources/js/your-big-custom.js",
        "-o", "build/resources/main/META-INF/resources/js/your-big-custom.min.js",
        "-c", "-m" // Compress code and mangle variable names
    ]
}

// Run minify before processing resources
processResources.dependsOn(minifyPortletJS)

3. Install uglify-js locally: npm install uglify-js --save-dev

Option 2: Enable Liferay's Built-In Module Minification #

Liferay can automatically minify resources in OSGi modules if configured correctly:

1. Per-module setting: Add this to your module's bnd.bnd file to enable minification only for this portlet:

Liferay-JS-Config: { "minify": true }

2. Global setting: To enable minification for all modules, add these lines to portal-ext.properties:

javascript.fast.load=true
minify.enabled=true

Note: Test thoroughly—some complex JS might break if minification isn't compatible with your code structure.

Option 3: Use Liferay's Frontend JS Module Extender #

If your JS is structured as an AMD or ES module (using define() or imports), Liferay's module loader will handle minification automatically when the portal's minify settings are enabled (from Option 2). Ensure your module is properly registered in the portlet's resources.

Important Checks #

• Always test minified code to confirm no functionality is lost—some try/catch blocks or dynamic code might need adjustments.
• Exclude the original unminified JS from your deployed artifact to avoid bloating the portlet.

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