如何解决如何配置 babel 以在多个 webpack 入口点仅导入必要的 polyfill?
我正在构建一个网络应用程序,我想提高它的性能。下面的示例只是为了说明情况并尝试了解 babel 和 core-js 的工作原理以及如何正确配置 webpack。
package.json
"devDependencies": {
"@babel/core": "^7.14.6","@babel/preset-env": "^7.14.7","babel-loader": "^8.2.2","webpack": "^5.40.0","webpack-cli": "^4.7.2"
},"dependencies": {
"core-js": "^3.15.1"
},"browserslist": [
"defaults"
]
webpack.config.js
module.exports = {
entry: {
foo: "./src/foo",bar: "./src/bar",},output: {
clean: true,mode: "development",devtool: false,module: {
rules: [
{
test: /\.m?js$/,exclude: /node_modules/,use: {
loader: "babel-loader",options: {
presets: [
[
"@babel/preset-env",{
useBuiltIns: "usage",corejs: 3.15,],};
foo.js
Promise.resolve(42).then((x) => console.log(x));
bar.js
Promise.resolve(99).then((x) => console.log(x));
运行 webpack 构建时,useBuiltIns: "usage"
选项会自动检测要导入的 polyfill,但它会导致跨多个文件(输出包 dist/foo.js 和 dist/bar.js 包含 Promise
) 的 polyfill:
asset bar.js 97.6 KiB [emitted] (name: bar)
asset foo.js 97.6 KiB [emitted] (name: foo)
runtime modules 2.38 KiB 10 modules
modules by path ./node_modules/core-js/internals/*.js 40.1 KiB 79 modules
modules by path ./src/*.js 376 bytes
./src/foo.js 188 bytes [built] [code generated]
./src/bar.js 188 bytes [built] [code generated]
modules by path ./node_modules/core-js/modules/*.js 14.3 KiB
./node_modules/core-js/modules/es.object.to-string.js 380 bytes [built] [code generated]
./node_modules/core-js/modules/es.promise.js 13.9 KiB [built] [code generated]
webpack 5.40.0 compiled successfully in 940 ms
如果我更改 useBuiltIns: "entry"
并添加一个新的 webpack 入口点来导入 polyfills entry: { polyfills: "core-js/stable" }
然后再次运行 webpack build,polyfills 被捆绑到一个单独的文件 dist/polyfills.js em> 但它太大了(其中包含不必要的代码):
asset polyfills.js 640 KiB [emitted] (name: polyfills)
asset bar.js 265 bytes [emitted] (name: bar)
asset foo.js 265 bytes [emitted] (name: foo)
runtime modules 221 bytes 1 module
modules by path ./node_modules/core-js/modules/*.js 238 KiB 226 modules
modules by path ./node_modules/core-js/internals/*.js 152 KiB 167 modules
modules by path ./src/*.js 198 bytes
./src/foo.js 99 bytes [built] [code generated]
./src/bar.js 99 bytes [built] [code generated]
./node_modules/core-js/stable/index.js 9.46 KiB [built] [code generated]
webpack 5.40.0 compiled successfully in 1859 ms
我也尝试将 plugins: [ "@babel/plugin-transform-runtime" ]
添加到 babel-loader 选项(和 npm install --save @babel/runtime
),但没有任何改变。
为了解决这个问题,我可以手动添加 polyfill(在本例中为 import "core-js/stable/promise"
),但如果有更好的解决方案就好了。
如何将 babel 配置为仅将必要的 polyfill 导入到一个单独的文件中,而无需手动将它们一一导入?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。