面试题：Webpack与Gulp高级构建效率分析题

Webpack构建效率挑战及优化

挑战
- 模块解析缓慢：大型项目模块众多，Webpack在解析模块依赖关系时，遍历和查找耗时。例如在多层嵌套的模块结构中，寻找一个深层依赖模块可能需要遍历大量目录。
- Loader处理时间长：像Babel-loader处理JavaScript代码转译，Sass-loader处理Sass到CSS转换，对于大量文件会花费很多时间。特别是Babel-loader，将ES6+代码转译成ES5，复杂语法转换工作量大。
- 插件过多影响：过多插件在构建过程中执行各种任务，如代码压缩、分析等，插件间相互影响，可能导致构建流程复杂，时间延长。
- 输出文件体积大：合并后的JavaScript、CSS文件过大，生成和写入磁盘时间长，影响构建效率。
优化思路及关键配置项
- 优化模块解析
  - 配置alias：在webpack.config.js中使用alias，减少模块查找路径。例如：

const path = require('path');
module.exports = {
    //...
    resolve: {
        alias: {
            '@components': path.resolve(__dirname, 'src/components'),
            '@utils': path.resolve(__dirname, 'src/utils')
        }
    }
};

    - **使用noParse**：对于一些不需要解析依赖的库，如`jquery.min.js`，可使用`noParse`，在`module`配置中设置：

module.exports = {
    //...
    module: {
        noParse: /jquery.min.js/
    }
};

- **优化Loader**
    - **缓存Loader结果**：Babel-loader可通过`cacheDirectory`开启缓存，在`.babelrc`或`webpack.config.js`中设置：

{
    "presets": [
        [
            "@babel/preset - env",
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "cacheDirectory": true
}

    - **Loader并行处理**：使用`thread-loader`，将耗时的Loader（如Babel-loader）放入`thread-loader`之后，开启多线程处理。例如：

module.exports = {
    //...
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    'thread-loader',
                    {
                        loader: 'babel-loader',
                        options: {
                            //...
                        }
                    }
                ]
            }
        ]
    }
};

- **优化插件**
    - **按需使用插件**：仅在生产环境使用代码压缩插件，如`terser - webpack - plugin`。在`webpack - prod.config.js`中：

const TerserPlugin = require('terser - webpack - plugin');
module.exports = {
    //...
    optimization: {
        minimizer: [
            new TerserPlugin()
        ]
    }
};

    - **优化插件执行顺序**：合理安排插件顺序，例如先执行代码分析插件，再执行压缩插件。
- **优化输出**
    - **代码分割**：使用`splitChunks`进行代码分割，提取公共模块。在`webpack.config.js`中：

module.exports = {
    //...
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

    - **启用gzip压缩**：在生产环境使用`compression - webpack - plugin`进行gzip压缩，减小传输体积。在`webpack - prod.config.js`中：

const CompressionPlugin = require('compression - webpack - plugin');
module.exports = {
    //...
    plugins: [
        new CompressionPlugin()
    ]
};

Gulp构建效率挑战及优化

挑战
- 任务串行执行：默认情况下，Gulp任务是串行执行的，若有多个任务，前面任务完成后才执行下一个，导致构建时间长。例如先编译Sass，再压缩CSS，等待时间累加。
- 文件读取和写入频繁：每次任务都可能读取和写入文件，对于大量文件，频繁I/O操作会降低效率。如每次修改CSS文件，都要重新读取和写入压缩后的文件。
- 缺乏缓存机制：没有像Webpack那样的缓存功能，重复任务每次都要重新处理，浪费时间。例如每次构建都重新编译Sass文件，即使文件未改变。
优化思路及关键配置项
- 优化任务执行顺序
  - 并行任务：使用gulp - parallel使多个任务并行执行。例如，编译Sass和压缩JavaScript可同时进行：

const gulp = require('gulp');
const sass = require('gulp - sass');
const uglify = require('gulp - uglify');
const parallel = require('gulp - parallel');

function compileSass() {
    return gulp.src('src/sass/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('dist/css'));
}

function minifyJs() {
    return gulp.src('src/js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));
}

exports.default = parallel(compileSass, minifyJs);

- **减少文件I/O操作**
    - **使用gulp - cached**：缓存文件状态，只有文件改变时才重新处理。例如在处理JavaScript文件时：

const gulp = require('gulp');
const cached = require('gulp - cached');
const babel = require('gulp - babel');

function transformJs() {
    return gulp.src('src/js/*.js')
      .pipe(cached('js'))
      .pipe(babel())
      .pipe(gulp.dest('dist/js'));
}

exports.default = transformJs;

    - **使用gulp - newer**：只处理比目标文件新的源文件。如处理图片：

const gulp = require('gulp');
const newer = require('gulp - newer');

function copyImages() {
    return gulp.src('src/images/*')
      .pipe(newer('dist/images'))
      .pipe(gulp.dest('dist/images'));
}

exports.default = copyImages;

- **添加缓存机制**
    - **自定义缓存**：对于一些复杂处理（如CSS预处理），可自行实现缓存逻辑。例如，使用`gulp - remember`配合`gulp - cached`，对编译后的CSS文件进行缓存：

const gulp = require('gulp');
const sass = require('gulp - sass');
const cached = require('gulp - cached');
const remember = require('gulp - remember');

function compileSass() {
    return gulp.src('src/sass/*.scss')
      .pipe(cached('sass'))
      .pipe(sass())
      .pipe(remember('sass'))
      .pipe(gulp.dest('dist/css'));
}

exports.default = compileSass;

面试题：Webpack与Gulp高级构建效率分析题

知识考点

面试题答案

Webpack构建效率挑战及优化

Gulp构建效率挑战及优化