webpack esbuild tree-shaking @vueuse/core失败替换方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了webpack esbuild tree-shaking @vueuse/core失败替换方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

现象

在webpack中构建，使用esbuild压缩代码，@vue-use/core不能被tree shaking

依赖

webpack@5.88.0
webpack-cli@5.1.4
esbuild@0.18.10
esbuild-loader@3.0.1
@swc/core@1.3.62
swc-loader@0.2.3
@vueuse/core@9.12.0

webpack.config.js

const { EsbuildPlugin } = require('esbuild-loader');
module.exports = {
    optimization: {
        minimizer: [
            new EsbuildPlugin({
                css: true
            })
        ]
    }
}

使用webpack-bundle-analyzer 执行npm run build 后发现构建产物中@vueuse/core 占用200K，

实际上我仅使用了 vueuse 中的 useInfinityScroll，如果正常tree-shaking 的情况下应只有几KB才对

替代方案

使用terser-webpack-plugin

webpack5 自带terser，压缩速度略慢，我的项目达到20s左右。

但如果要更改webpack 的terser配置，需要手动安装一遍terser-webpack-plugin。

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                minify: TerserPlugin.swcMinify, // 采用swc进行压缩
                // minify: TerserPlugin.esbuildMinify // 这里使用esbuild 也不能正常tree shaking @vueuse/core
            })
        ]
    }
}

TerserPlugin可以指定压缩器。这里采用swc进行代码压缩。构建时间从20s 降低到12s左右。构建时间减少约40%。@vueuse/core也成功被摇掉了。

css压缩

原来用esbuild压缩代码可以压缩css，现在用swc是不行的

由于我们的环境还是使用node12，css-minimizer-webpack-plugin 最低支持node14。因此，还是要用esbuild来压缩css。

配置esbuild仅压缩css

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new EsbuildPlugin({
                include: /\.css$/, // 仅压缩css
                css: true
            }),
            new TerserPlugin({
                minify: TerserPlugin.swcMinify, // 采用swc进行压缩
                // minify: TerserPlugin.esbuildMinify // 这里使用esbuild 也不能正常tree shaking @vueuse/core
            })
        ]
    }
}

完成文章来源地址https://www.toymoban.com/news/detail-522836.html

到了这里，关于webpack esbuild tree-shaking @vueuse/core失败替换方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！