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
            })
        ]
    }
}

完成