Fatal编程技术网
  • javascript/
  • Javascript 使用网页包拆分块防止重复

Javascript 使用网页包拆分块防止重复

javascript webpack

Javascript 使用网页包拆分块防止重复,javascript,webpack,Javascript,Webpack,我正在努力解决拆分块的问题，对于类似的问题，我似乎找不到合适的答案。也许我的方法是错误的 我想从我的核心包（ui.js）中删除一组通用模块，并将它们放在一个单独的文件（inline.js）中 webpack.config.js： module.exports = { entry: { inline: [ './src/utils/namespace/namespace.js', './src/core/pubsub/pubsub.js',

我正在努力解决拆分块的问题，对于类似的问题，我似乎找不到合适的答案。也许我的方法是错误的

我想从我的核心包（ui.js）中删除一组通用模块，并将它们放在一个单独的文件（inline.js）中

webpack.config.js：

module.exports = {
entry: {
    inline: [
        './src/utils/namespace/namespace.js',
        './src/core/pubsub/pubsub.js',
        './src/core/rum/rum.js',
    ],
    ui: './src/ui.js',
},
output: {
    filename: '[name].js',
    path: path.resolve( __dirname, 'dist/js' ),
},
optimization: {
    splitChunks: {
        cacheGroups: {
            inline: {
                name: 'inline',
                test: 'inline',
                chunks: 'all',
                enforce: true
            }
        }
    }
}
};
HTML页面：

<html>
    <head>
        <script>
            // I load the code from inline.js here
        </script>
        <script>
            // Another small inline script outside of webpack
            RUM.mark( 'js_inline_loaded' ); // RUM is not defined
        </script>
        <script src="ui.js" defer></script>
    </head>
</html>


//我在这里从inline.js加载代码
//另一个网页外的小型内联脚本
RUM.mark（'js_inline_loaded'）；//朗姆酒没有定义
当代码被正确地分割到各自的文件中时，上面的代码似乎可以工作，但内联代码不会立即初始化，因为它被推送到一个名为webpackJsonp的数组中

这意味着使用inline.js中定义的RUM，当直接在include之后调用它时，它会出错，因为它没有定义

是否有一个我缺少的简单选项来删除webpackJsonp数组

我是在做傻事，还是应该采取不同的方法

任何帮助都将不胜感激。

不幸的是，这没有得到多少回应。在尝试理解文档并测试每个可能的配置选项之后，我想出了一个解决方法，以便在任何人遇到类似问题时发布。请记住，这是一个解决办法，如果我找到了正确的方法，我会更新

我的优化配置对象现在看起来如下所示：

optimization: {
    runtimeChunk: { name: 'inline-manifest' },
    splitChunks: {
        cacheGroups: {
            common: {
                chunks: 'all',
                name: 'inline-commons',
                test: 'inline',
                enforce: true
            }
        }
    }
}
这将生成三个文件inline.js，inline commons.js，inline manifest.js

这些都包含在“内联”页面脚本中：

<html>
    <head>
        <script>
            // Load inline,js, inline-commons.js & inline-manifest.js here
        </script>
        <script>
            // Another small inline script outside of webpack
            RUM.mark( 'js_inline_loaded' ); // RUM is now defined
        </script>
        <script src="ui.js" defer></script>
    </head>
</html>


//在此处加载inline、js、inline-commons.js和inline-manifest.js
//另一个网页外的小型内联脚本
RUM.mark（'js_inline_loaded'）；//朗姆酒现在有了定义
inline commons-包含inline.js和ui.js之间共享的所有代码

内联清单-包含用于初始化脚本的Web包引导加载程序

inline-包含inline.js独有的模块

就像我说的，这是一个解决办法，所以请小心行事。如果有人知道正确的方法，请随时发布更新。

webpackJsonp是webpack查找所有块的方式（这是有意的）。尝试拆分运行时块，添加runtimeChunk:true in optimization。@PlayMa256-添加runtimeChunk:{name:'inline'}似乎删除了webpackJsonp包装器，但它仍然没有自调用，因此RUM仍然没有定义。您仍然使用这种方法吗？听起来像是我现在要做的。