我尝试在我的ReactJS项目中使用WordPress依赖项。出于某种奇怪的原因,从@wordpress/components依赖项导入任何组件都会使我的gulp构建时间从694毫秒增加到9.42秒。这使得我的代码几乎不可能使用手表。
我在构建过程中使用babelify / browserify,如下所示。
gulfile.js
var argv = require('yargs').argv;
var gulpif = require('gulp-if');
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');
var project = {
scriptSource: './src/react-designer.js',
outputFile: 'react-designer.js',
outputDir: './dist/'
}
/**
* Build an output file. Babelify is used to transform 'jsx' code to JavaScript code.
**/
gulp.task("build", function(){
var options = {
entries: project.scriptSource, // Entry point
extensions: [".js"], // consider files with these extensions as modules
debug: argv.production ? false : true, // add resource map at the end of the file or not
paths: ["./src/"] // This allows relative imports in require, with './src/' as root
};
var babelifyOpts = {
sourceMaps: !argv.production,
presets: [
"@babel/preset-env",
"@babel/preset-react"
],
plugins: [
[ "@babel/plugin-transform-react-jsx" ]
]
}
return browserify(options)
.transform( babelify, babelifyOpts )
.bundle()
.pipe( source( project.outputFile ) )
.pipe(gulpif(argv.production, buffer())) // Stream files
.pipe(gulpif(argv.production, uglify()))
.pipe(gulp.dest("./dist/"));
});
package.json
{
"version": "1.0.0-alpha.0",
"description": "",
"author": "NOKNOK Studios",
"files": [
"dist/"
],
"dependencies": {
"@wordpress/components": "^17.0.0",
"ntc": "^0.0.1",
"react": "^17.0.2"
},
"private": true,
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/plugin-transform-react-jsx": "^7.14.9",
"@babel/plugin-transform-react-jsx-self": "^7.14.9",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"git": "^0.1.5",
"gulp": "^4.0.2",
"gulp-bump": "^3.2.0",
"gulp-filter": "^7.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-tag-version": "^1.3.1",
"gulp-uglify": "^3.0.2",
"node-sass": "^6.0.1",
"sass": "^1.41.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
}
}
react-designer.js
import Component from 'react';
import { Button } from '@wordpress/components';
class Designer extends Component {
render() {
return <Button>Click Me!</Button>;
}
}
我意识到构建时间的增加可能是由于@wordpress/components使用的依赖项的数量。如果可能的话,我宁愿不交换这个依赖项。
关于如何优化我的构建过程以在2秒内运行,有什么建议吗?
1条答案
按热度按时间hrysbysz1#
结果发现我是个白痴,Watchify是“practically a must“,因为它缓存了被监视的构建之间的依赖关系。
更新的gulpfile.js