本配置在较复杂的跨多端项目中,测试过h5的打包性能和打包效果亲测可用。其他平台未充分测试，使用前请充分测试和考虑风险。

RT,直接上效果图和代码。

const {ESBuildMinifyPlugin} = require('esbuild-loader');
const {jsPreprocessOptions} = require("@dcloudio/uni-cli-shared");
const path = require("path");
const resolveFn = (dir) => path.resolve(__dirname, dir)

module.exports = {
    chainWebpack: (config) => {

        // 使用 esbuild 编译 js 文件
        const rule = config.module.rule('js');

        // 清理自带的 babel-loader
        //clear是不是有些激进,用下面的会好些吗？挨个删除之类的，不过没时间还是直接clear
        rule.uses.clear();
        // rule.uses.delete('babel-loader');

        // 添加 esbuild-loader
        rule
            .use('esbuild-loader')
            .loader('esbuild-loader')
            // .options({
            //   loader: 'ts', // 如果使用了 ts, 或者 vue 的 class 装饰器，则需要加上这个 option 配置， 否则会报错： ERROR: Unexpected "@"
            //   target: 'es2015',
            //   tsconfigRaw: require('./tsconfig.json')
            // })

		//使条件编译生效
        rule.uses.values().push({
            loader: resolveFn('node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader'),
            options: jsPreprocessOptions
        })


        //下面这个自定义loader纯粹hack,参见node_modules/@dcloudio/vue-cli-plugin-uni/lib/configure-webpack.js的updateJsLoader函数,果然牛逼的公司各不相同
        //这里真是人才，居然需要模拟一个空的名字为babel-loader或者@babel-loader开头的loader才可以通过。而且居然还抛出异常
        rule
            .use('dcloud666888')
            .loader(resolveFn('babel-loader-empty'))

        // 删除底层 terser, 换用 esbuild-minimize-plugin
        config.optimization.minimizers.delete('terser');

        // 使用 esbuild 优化 css 压缩
        config.optimization
            .minimizer('esbuild')
            .use(ESBuildMinifyPlugin, [{minify: true, css: true}]);
    },
    //其他配置
}

附babel-loader-empty.js这空的webpack自定义loader,纯粹是为了满足@dcloudio/vue-cli-plugin-uni他们的奇葩写法。

//直接放在根目录下面和vue.config.js同级即可，想放在其他地方或者做成一个npm包，记得去vue.config.js中修改loader的路径。
module.exports = function (content, map) {
    // console.log('我啥也不干，就是逗dcloud玩')
    return content
}