如何在Shopware 6中用Webpack加载独立JS文件并优化网页性能

问题背景 #

为优化页面性能，需要拆分Storefront默认的all.js，通过Webpack代码分割和动态导入加载独立的JS文件，避免加载不必要的代码。但配置自定义Webpack后，执行bin/build-storefront.sh未生成对应独立文件，动态导入时返回404错误。

核心错误原因 #

1. Webpack配置文件位置错误：自定义配置文件需放在主题插件的src/Resources/app/storefront/目录下，而非插件根目录，否则Shopware构建脚本无法识别。
2. 配置方式错误：Shopware 6的Storefront Webpack采用webpack-chain管理配置，直接导出对象会覆盖官方默认配置，需通过函数形式合并配置。
3. 入口路径未匹配Shopware构建规则：入口文件路径需基于src/Resources/app/storefront/目录设置。

解决方案步骤 #

1. 放置正确的Webpack配置文件 #

在主题插件的src/Resources/app/storefront/目录下创建webpack.config.js，内容如下：

module.exports = (config) => {
    // 添加独立JS文件的入口
    config.entry('separateFile').add('./src/js/separate.js');

    // 配置代码分割规则
    config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
            defaultVendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    });

    return config;
};

2. 执行正确的构建命令 #

运行Storefront构建脚本：

bin/build-storefront.sh

构建完成后，独立JS文件会生成在public/bundles/[your-theme-plugin-name]/storefront/js/目录下，文件名对应配置中的separateFile.js。

3. 动态导入独立JS文件 #

在src/Resources/app/storefront/src/main.js中，通过动态导入按需加载独立文件，示例如下：

场景1：事件触发时加载

// 监听按钮点击，点击后加载独立JS
document.querySelector('.trigger-separate-js').addEventListener('click', async () => {
    const separateModule = await import('./js/separate.js');
    // 调用独立JS中的方法
    separateModule.init();
});

场景2：特定页面加载（结合Shopware页面生命周期）

// 注册服务用于加载独立JS
Shopware.Application.addServiceProvider('separateService', () => {
    return {
        loadModule: async () => {
            const module = await import('./js/separate.js');
            return module;
        }
    };
});

// 在产品详情页面初始化时加载
Shopware.Page.register('product-detail', {
    async init() {
        const separateModule = await Shopware.Service('separateService').loadModule();
        separateModule.initProductPage();
    }
});

注意事项 #

• 确保独立JS文件separate.js存在于src/Resources/app/storefront/src/js/目录下。
• 构建后需清理浏览器缓存，避免加载旧资源。
• 若使用Shopware的psh.phar工具，可替代构建命令为：./psh.phar storefront:build

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