现象
在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
})
]
}
}
完成