javascript - HTML 元素的属性文本字面上在字符之间添加了空格(或者如何找出正在改变元素属性的内容？)

Question

我最近看到了一个我无法解释的问题，我不知道如何调试以找出是什么改变了我所看到的。刚开始时，我无法设置重现环境，因为我不知道是什么原因造成的。我只能解释我所看到的，看看是否有人看过或知道如何弄清楚发生了什么。

所以，正如标题所说，我的页面上有一个正常启动的元素，但在某个时候元素的类属性之一(即“class1 class2 等”)确实在每个元素之间放置了一个空格字符(即“c l a s s 1 c l a s s 2 e t c”)。

这发生在包含两个 JavaScript 包的页面上，它们都使用 Webpack 打包并使用 Babel。这个问题只发生在 IE11 中，所以 Babel 转换也使用了一些 core-js polyfills，其中我使用的是 core-js 3。这对两个包都是通用的。我在这些包的各种版本中看到过这个问题，有些组合没有出现这个问题，但是一个包的某些版本会一直导致它。并且这两个包似乎都能够导致它，通过在一个包中隔离一个包并更改另一个包并看到事情发生变化来证明。所以我倾向于它与依赖关系有关(即 webpack、babel、core-js 或其他东西，但这些是主要的东西)。当我看到哪些包好哪些不好时，我比较了构建输出，但没有注意到任何突出的原因。

这是我上面描述的类属性的屏幕截图:

所以，我的问题:

1. 有没有人见过这个结果并且知道为什么会这样？如果有人看到了这种情况并且知道是什么原因造成的，那就太好了。
2. 除此之外，是否有人知道如何隔离属性更改，在本例中是类属性更改，并查看是什么原因造成的？我已经尝试通过 IE11“性能”工具并找到了“样式计算”，它在其中计算发生此属性更改时的更改，但我无法从那里了解可能是什么 JavaScript 代码实际进行了更改。有什么办法吗？在 IE11 中，因为这是我唯一看到它的地方。

就像我说的，这是一个非常奇怪的问题，所以我真的不希望得到任何答案，但如果有人能提供任何帮助或关于该怎么做的想法，我将不胜感激。谢谢。

编辑:添加一些配置，一切都很标准

包 1(非 UI 组件):包 1 Babel 配置:

module.exports = {
"presets": [
    [
        "@babel/preset-env",
        {
            targets: {
                browsers: [
                    "> 0.25%",
                    "last 2 versions",
                    "ie 11",
                    "edge 18",
                    "safari >= 11",
                    "not dead"
                ]
            },
            corejs: 3,
            useBuiltIns: "usage",
            debug: false
        }
    ]
],
"ignore": [
    /babel-/,
    /@babel\/runtime/,
    /core-js/,
    /regenerator-runtime/
],
"plugins": [
    [
        "@babel/plugin-proposal-decorators",
        {
            legacy: true
        }
    ],
    [
        "@babel/plugin-proposal-class-properties",
        {
            loose: true
        }
    ],
    [
        "@babel/plugin-transform-runtime",
        {
            regenerator: true,
            corejs: 3
        }
    ]
],
"sourceMaps": true,
"sourceType": "unambiguous"
};

Package 1 Webpack 配置(合并在一起):

(常见):

{
entry: path.join( __dirname, 'src', 'Main.js' ),
devtool: 'source-map',
output: {
    devtoolNamespace: 'APPNAME'
},
module: {
    rules: [
        {
            enforce: 'pre',
            test: /\.js$/,
            loader: 'eslint-loader',
            exclude: [
                /node_modules/
            ]
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
        }
    ]
},
plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
    })
]
};

(生产):

{
mode: 'production',
output: {
    path: path.join(__dirname, 'dist'),
    filename: libnamemin
},
optimization: {
    moduleIds: 'total-size',
    mangleWasmImports: true,
    concatenateModules: false,
    minimizer: [
        new BabelMinifyPlugin({
            removeDebugger: true,
            mangle: true
        },{
            comments: false,
            sourceMap: 'source-map'
        })
    ]
},
module: {
    rules: []
},
plugins: [
    new CleanWebpackPlugin(),
    new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: false,
        generateStatsFile: true,
        reportFilename: path.join(__dirname, './reports/bundle/report.html'),
        statsFilename: path.join(__dirname, './reports/bundle/stats.json')
    })
]
};

包2(UI组件使用“customElements”，在IE11中，“webcomponentsjs”polyfill)包2 Babel配置:

module.exports = {
"presets": [
    [
        "@babel/preset-env",
        {
            targets: {
                browsers: [
                    "> 0.25%",
                    "last 2 versions",
                    "ie 11",
                    "edge 18",
                    "safari >= 11",
                    "not dead"
                ]
            },
            corejs: 3,
            useBuiltIns: "usage",
            debug: false
        }
    ]
],
"ignore": [
    /babel-/,
    /@babel\/runtime/,
    /core-js/,
    /regenerator-runtime/,
    /webcomponentsjs/,
    /@webcomponents/
],
"plugins": [
    [
        "@babel/plugin-proposal-decorators",
        {
            legacy: true
        }
    ],
    [
        "@babel/plugin-proposal-class-properties",
        {
            loose: true
        }
    ],
    [
        "@babel/plugin-transform-runtime",
        {
            regenerator: true,
            corejs: 3
        }
    ],
    [
        "@babel/plugin-syntax-dynamic-import",
        { }
    ]
],
"sourceMaps": true,
"sourceType": "unambiguous"
};

Package 2 Webpack 配置(合并在一起):

(常见)

{
entry: path.join( __dirname, 'src', 'App.js' ),
devtool: 'source-map',
output: {
    devtoolNamespace: 'APPNAME'
},
module: {
    rules: [
        {
            enforce: 'pre',
            test: /\.js$/,
            loader: 'eslint-loader',
            exclude: [
                /node_modules/
            ]
        },
        {
            test: /\.(svg|png|woff|woff2)$/,
            loader: 'url-loader'
        },
        {
            test: /\.css|\.s(c|a)ss$/,
            use: [
                'to-string-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            importer: jsonImporter()
                        }
                    }
                }
            ]
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            options: {
                root    : __dirname,
                rootMode: 'upward-optional'
            }
        }
    ]
},
plugins: [
    new UnusedFilesWebpackPlugin({
        patterns: ['./src/resources/images/*', './src/resources/logos/*'],
    }),
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
    })
]
};

(生产):

{
mode: 'production',
output: {
    path: path.join(__dirname, 'build'),
    filename: 'APPNAME.min.js'
},
optimization: {
    moduleIds: 'total-size',
    mangleWasmImports: true,
    concatenateModules: false,
    minimizer: [
        new BabelMinifyPlugin({
            removeDebugger: true,
            mangle: true
        },{
            comments: false,
            sourceMap: 'source-map'
        })
    ]
},
module: {
    rules: []
},
plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
        'process.env.__TF_NAME__': JSON.stringify(pkg.name),
        'process.env.__TF_VERSIONBUILD__': JSON.stringify('__METADATA_VERSION_BUILD__'),
        'process.env.__TF_VERSION__': JSON.stringify('__METADATA_VERSION__'),
        'process.env.__TF_BUILDDATE__': JSON.stringify((new Date(Date.now())).toUTCString())
    }),
    new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: false,
        generateStatsFile: true,
        reportFilename: path.join(__dirname, './reports/bundle/report.html'),
        statsFilename: path.join(__dirname, './reports/bundle/stats.json'),
    })
]
};

Answer 1

这对谷歌来说不是一个容易的问题，但我在尝试的过程中找到了这篇文章!

最终，我通过(繁琐的)调试找到了问题的原因。事实证明这是 core-js 问题的结果:

https://github.com/zloirock/core-js/issues/751

使用以下命令降级解决了问题:

npm install core-js@3.5.0 --save