Grunt:加载依赖项需要几分钟

Question

我将一些相当标准的任务和合理数量的依赖项组合在一起，但由于某种原因，实际加载依赖项需要1-3分钟。我刚开始咕哝，但由于大多数关于极慢加载依赖关系的问题都引用了几秒钟的时间，我猜我做了一些非常错误的事情。

下面是我的gruntfile文件的样子：

const path = require("path");

module.exports = function(grunt) {
    require('jit-grunt')(grunt);
    require('time-grunt')(grunt);

    const ignoredSourceScriptPatterns = ['!**/*.debug.js', '!**/*.min.js', '!scripts/*', '!**/*.map'],
        baseUIPath = 'presentation/ui',
        scripts = grunt.file.expand({filter: 'isFile',
            matchBase: true,
            cwd: baseUIPath},
        ['*.js', ...ignoredSourceScriptPatterns]);

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        copy: {
            build: {
                cwd: 'presentation/',
                src: 'ui/**',
                dest: path.join('presentation', 'static'),
                expand: true
            }
        },
        uglify: {
            options: {
                sourceMap: true,
                compress: false
            },
            build: {
                cwd: baseUIPath,
                files: function() {
                    var modules = grunt.file.expand({
                            filter: 'isDirectory',
                            expand: true,
                            cwd: 'presentation/ui/modules'
                        }, ['**', '!**/css', '!**/scripts', ...ignoredSourceScriptPatterns]),
                        components = grunt.file.expand({
                            filter: 'isFile',
                            expand: true,
                            cwd: 'presentation/ui'
                        }, ['components/!*.js', ...ignoredSourceScriptPatterns]),
                        files, componentFiles;

                    files = modules.map(function(path) {
                        var modulePath = `modules/${path}/scripts`,
                            moduleName = modulePath.split('/').reduce(function(result, next) {
                                var nameFragment;

                                switch(next) {
                                case "modules":
                                    nameFragment = "Poptart.";
                                    break;
                                case "scripts":
                                    nameFragment = "min.js";
                                    break;
                                default:
                                    nameFragment = `${next.charAt(0).toUpperCase() + next.slice(1)}.`;
                                    break;
                                }
                                return result + nameFragment;
                            }, "");

                        return {
                            src: grunt.file.expand({
                                filter: 'isFile'
                            }, [`${baseUIPath}/${modulePath}/*.js`, ...ignoredSourceScriptPatterns]).sort(
                                function(a, b) {
                                    return a.length - b.length;
                                }
                            ),
                            dest: `${baseUIPath}/${modulePath}/${moduleName}`
                        };
                    });

                    componentFiles = components.map(function(componentPath) {
                        return {
                            src: `${baseUIPath}/${componentPath}`,
                            dest: `${baseUIPath}/${componentPath.replace('.js', '.min.js')}`
                        };
                    });

                    files = [...files, ...componentFiles];

                    files.push({
                        src: grunt.file.expand({
                            filter: 'isFile'
                        }, [`${baseUIPath}/*.js`, ...ignoredSourceScriptPatterns]),
                        dest: `${baseUIPath}/poptart.min.js`
                    });

                    return files;
                }(),
                extDot: 'last',
                expand: true
            }
        },
        cssmin: {
            options: {
                sourceMap: true
            },
            build: {
                cwd: 'presentation/static/ui/',
                src: ['**/*.css', '!css/jquery-ui/**', '!css/ionicons/**', '!**/*.min.js'],
                dest: 'presentation/static/ui/',
                ext: '.min.css',
                expand: true
            }
        },
        eslint: {
            options: {
                configFile: 'presentation/build/eslint.json',
                ignorePath: 'presentation/build/.eslintignore'
            },
            target: ['presentation/**/*.js', '!presentation/ui/scripts/*', '!presentation/static/**']
        },
        shell: {
            test: {
                command: 'python manage.py test -p "*tests.py"',
                options: {
                    stdout: true,
                    failOnError: true
                }
            }
        },
        karma: {
            unit: {
                configFile: 'karma.conf.js',
                singleRun: true
            }
        },
        mochaTest: {
            unit: {
                options: {
                    reporter: 'spec'
                },
                src: ['presentation/test/server/*.js']
            }
        }
    });

    /*grunt.loadNpmTasks('grunt-shell');
    grunt.loadNpmTasks('grunt-eslint');
    grunt.loadNpmTasks('grunt-karma');
    grunt.loadNpmTasks('grunt-mocha-test');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-newer');*/

    grunt.registerTask('default', ['lint', 'test']);
    grunt.registerTask('test', ['shell:test', 'mochaTest:unit', 'karma:unit']);
    grunt.registerTask('lint', ['eslint']);
    grunt.registerTask('build-static', ['uglify', 'copy', 'cssmin']);
};

以及来自package.json的dev依赖关系：

  "devDependencies": {
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "eslint": "^3.7.1",
    "grunt": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.2",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-eslint": "^19.0.0",
    "grunt-karma": "^2.0.0",
    "grunt-mocha-test": "^0.13.2",
    "grunt-newer": "^1.2.0",
    "grunt-shell": "^1.3.1",
    "jit-grunt": "^0.10.0",
    "jquery": "^3.1.1",
    "karma": "^1.3.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jquery-chai": "^0.1.3",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sinon": "^1.0.5",
    "mocha": "^3.2.0",
    "sinon": "^1.17.6",
    "sinon-chai": "^2.8.0",
    "time-grunt": "^1.4.0"
  }

到目前为止，我尝试过的是：

1. 使用时间-咕噜验证加载任务实际上是一个问题。确实是。实际上，运行任务需要相当长的时间。
2. 用吉特-咕噜。这并没有什么明显的区别。
3. npm修剪这确实产生了相当大的差异(~30秒)，但仍然让我处于一个完全不合理的任务加载时间。
4. 移除和卸载一些依赖项(uglify、copy、cssmin) --在我开始看到这个问题的时候就添加了这些依赖项(最初，当我执行测试/linting任务时，一切都进行得非常顺利和快速)。这也没有明显的区别。

所以。还有什么能导致这种程度的缓慢？

谢谢你的帮忙!

Answer 1

因此，看起来造成这种情况的根本原因是在uglify任务中进行了一些效率低下的文件搜索。我完全忘记了，我让那一大团疯狂和IEF，这解释了为什么我看到的慢，即使当我没有运行丑陋的任务。我想这也解释了为什么文件搜索的时间会与加载任务混为一谈。

无论如何，主要的罪魁祸首是(可预见的)，我在这里返回动态找到的脚本模块的源/最路径，如下所示：

                    return {
                        src: grunt.file.expand({
                            filter: 'isFile'
                        }, [`${baseUIPath}/${modulePath}/*.js`, ...ignoredSourceScriptPatterns]).sort(
                            function(a, b) {
                                return a.length - b.length;
                            }
                        ),
                        dest: `${baseUIPath}/${modulePath}/${moduleName}`
                    };

因为它在一个循环中。无论如何，我注意到它丢失了一个cwd。加上这样，时间减少到7s。还需要改进，但至少现在我知道该改进什么。

这个故事的道德：

1. 在搜索文件时添加cwd
2. 如果你不需要的话，也许你就不用搜索文件了

Answer 2

我尝试运行Gruntfile并手动安装依赖项，Gruntfile的加载时间为4秒。不快，但不是你说的那些分钟。

我猜grunt.file.expand正在努力工作。也许presentation/ui文件夹太大了？通过运行tree presentation/ui | wc -l你得到了什么？它显示了你在那里的文件数量。

否则，也可以看到您的package.json和npm ls输出。