引入@wordpress/components后gulp/browserify构建时间暴涨15倍如何优化

问题核心原因 #

@wordpress/components 包含上百个封装好的组件及其依赖，默认全量导入时会将整个组件库所有文件都纳入编译流程，直接导致构建耗时暴涨，以下是无需替换依赖的可落地优化方案，按生效优先级排序：

优化方案 #

1. 改为单组件按需导入（无额外配置成本，生效最快） #

不要从包根路径批量导入，直接引入目标组件的单独打包产物，避免打包整个组件库：

// 废弃：全量导入写法（会引入所有组件）
// import { Button } from '@wordpress/components';
// 改用按需引入
import Button from '@wordpress/components/build-module/button';

仅这一项修改通常就能把构建时间压缩到2s以内。

2. 配置babelify跳过node_modules编译 #

你当前的配置没有排除node_modules目录，babel会对所有引入的依赖文件做冗余转译，直接拖慢速度，修改babelify配置即可：

// 在gulpfile.js的babelifyOpts中添加exclude配置
var babelifyOpts = {
    sourceMaps: !argv.production,
    presets: [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    plugins: [
        [ "@babel/plugin-transform-react-jsx" ]
    ],
    // 新增：排除node_modules下的文件，仅编译业务代码
    exclude: /node_modules/
}

如果有特殊ESM依赖需要转译，可以单独用include指定目标包，不需要全量编译node_modules。

3. 开发环境启用增量编译 #

安装browserify-incremental插件，监听模式下仅编译变更的文件，不用每次全量构建：
首先安装依赖：

npm install browserify-incremental --save-dev

然后修改gulpfile的build任务：

var incr = require('browserify-incremental');

gulp.task("build", function(){
    var options = {
        entries: project.scriptSource,
        extensions: [".js"],
        debug: argv.production ? false : true,
        paths: ["./src/"],
        // 新增增量编译配置
        cache: {},
        packageCache: {},
        plugin: [incr]
    };
    // 其余配置保持不变
});

这个优化对开发时的监听模式效果尤其明显，二次构建速度可以降到数百毫秒。

4. （WordPress开发场景最优解）配置externals排除打包 #

如果你开发的是WordPress插件/主题，WordPress运行环境本身已经内置了全套@wordpress/*依赖，不需要打包进你的产物，直接配置external映射全局变量即可：
修改browserify配置：

return browserify(options)
    .transform( babelify, babelifyOpts )
    // 新增：将@wordpress/components映射到全局wp.components
    .external('@wordpress/components')
    .bundle()
    // 后续逻辑保持不变

这个方案下@wordpress/components完全不参与构建，速度直接恢复到原来的694ms水平。

内容的提问来源于stack exchange，提问作者Cody Rees