Webpack 配置优化：提升打包速度的 10 个方法-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是前端开发中常用的打包工具，可以将项目中的各个模块打包成一个或多个文件。然而，随着项目规模的不断增大，Webpack 的打包速度也会变得越来越慢，影响开发效率。本文将介绍 10 个优化 Webpack 配置的方法，以提升打包速度。

1. 使用多进程打包

Webpack 默认是单进程打包，使用多进程可以充分利用 CPU 的多核能力，提高打包速度。可以使用 webpack-parallel-uglify-plugin 和 HappyPack 等插件来实现多进程打包。

// www.javascriptcn.com code example
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

module.exports = {
  // ...
  plugins: [
    new ParallelUglifyPlugin(),
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    })
  ]
};

2. 使用缓存

Webpack 打包过程中会生成一些中间文件，如果每次都重新打包，会浪费时间。可以使用 webpack-cache-loader 和 hard-source-webpack-plugin 等插件来缓存中间文件，提高打包速度。

// www.javascriptcn.com code example
const CacheLoader = require('webpack-cache-loader');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          { loader: 'cache-loader' },
          { loader: 'babel-loader' }
        ]
      }
    ]
  },
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

3. 压缩图片

图片是 Webpack 打包中比较耗时的部分，可以使用 image-webpack-loader 和 imagemin-webpack-plugin 等插件来压缩图片，减少打包时间。

// www.javascriptcn.com code example
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              disable: process.env.NODE_ENV === 'development',
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ImageMinimizerPlugin()
  ]
};

4. 使用 DllPlugin

DllPlugin 可以将第三方库打包成一个单独的文件，避免每次打包都重新编译第三方库，提高打包速度。

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  // ...
  entry: {
    vendor: ['react', 'react-dom', 'lodash']
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dll', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
};

5. 按需加载

按需加载可以避免一次性加载所有模块，提高页面加载速度。可以使用 import() 和 React.lazy() 等语法实现按需加载。

import('./module.js')
  .then(module => {
    // ...
  })
  .catch(error => {
    // ...
  });

// www.javascriptcn.com code example
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

6. 减少文件体积

减少文件体积可以降低打包时间，可以使用 tree shaking、code splitting 和 gzip 等技术来减少文件体积。

// www.javascriptcn.com code example
// tree shaking
import { add } from './math.js';
console.log(add(1, 2));

// code splitting
import('./module.js')
  .then(module => {
    // ...
  })
  .catch(error => {
    // ...
  });

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

7. 使用 resolve.alias

使用 resolve.alias 可以将模块路径映射成绝对路径，避免 Webpack 查找模块时的耗时操作。

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

8. 使用 resolve.extensions

使用 resolve.extensions 可以指定 Webpack 查找模块时的文件后缀名，避免 Webpack 查找模块时的耗时操作。

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

9. 使用 externals

使用 externals 可以将一些不需要打包的模块排除在外，减少打包时间。

module.exports = {
  // ...
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};

10. 使用缓存

使用缓存可以避免重复打包已经打包过的模块，提高打包速度。可以使用 cache-loader 和 hard-source-webpack-plugin 等插件来缓存模块。

// www.javascriptcn.com code example
const CacheLoader = require('cache-loader');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          { loader: 'cache-loader' },
          { loader: 'babel-loader' }
        ]
      }
    ]
  },
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

结语

通过以上 10 个优化 Webpack 配置的方法，可以显著提高打包速度，提高开发效率。在实际开发中，可以根据项目的具体情况选择合适的优化方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d2b9d6a941bf7134553ff4

Webpack 配置优化：提升打包速度的 10 个方法