如何使用Webpack在Shopware 6中加载单独的JS文件并提高Web性能?

mspsb9vt  于 2023-06-06  发布在  Webpack
关注(0)|答案(1)|浏览(129)

如何使用webpack在Shopware 6中加载单独的JS文件?
什么?
我尝试使用WebPack在all.js文件旁边加载一个单独的javascript文件。
为什么?
all.js文件可能会变得非常大,你会在页面上加载不必要的javascript。因此,通过使用代码拆分(这应该是可能的,因为WebPack在Shopware 6中实现)和动态导入,您可以停止加载不必要的JavaScript。

我所尝试的

我在主题插件的根目录下添加了一个webpack.config.js文件,如下所示:

module.exports = {

    entry: {
        main: './src/main.js', 
        separateFile: './src/js/separate.js'
    },

    output: {
        filename: '[name].js'
    },

    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
};

运行bin/build-storefront.sh后,没有在公共文件夹中添加单独的JS文件。
我还尝试在src/Resources/app/storefront/src/main.js中动态加载这个JS文件,但这导致404,因为单独的文件不存在。

6mzjoqzu

6mzjoqzu1#

这将不起作用,因为插件的所有预编译资产都收集在ThemeCompiler中并连接到一个脚本中。这是在PHP中完成的,因为node不是生产环境的要求。
您可以尝试添加单独的脚本作为额外的custom assets,但您仍然需要扩展模板以手动添加相应的script标记。

相关问题