Webpack 的性能优化技巧-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个前端工程化打包工具，它可以将多个 JavaScript 文件、CSS 文件、图片等资源打包成一个或多个文件，以便于在浏览器中加载。然而，在项目较大的情况下，Webpack 打包时间会变长，影响开发效率，因此优化 Webpack 的性能是很有必要的。

本文将介绍 Webpack 的性能优化技巧，包括：

使用多进程打包
减小打包体积
缓存打包结果
使用 Tree Shaking
使用动态导入

使用多进程打包

Webpack 默认是单线程打包，因此打包时间会比较长。我们可以使用多进程打包来提升打包速度。常用的多进程打包工具有 HappyPack 和 thread-loader。

HappyPack

HappyPack 是一个 Webpack 插件，可以将任务分解给多个子进程来并行处理。使用 HappyPack 需要修改 Webpack 配置文件。

// www.javascriptcn.com code example
const HappyPack = require('happypack');
const os = require('os');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HappyPack({
      loaders: ['babel-loader'],
      threads: os.cpus().length,
    }),
  ],
};

thread-loader

thread-loader 是一个 Webpack loader，可以将任务分解给多个子进程来并行处理。使用 thread-loader 只需要在 loader 配置中添加 thread-loader 即可。

// www.javascriptcn.com code example
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'thread-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

减小打包体积

减小打包体积可以提升打包速度。我们可以通过以下方式减小打包体积。

移除不必要的代码

我们可以使用 Webpack 的 UglifyJsPlugin 插件来移除不必要的代码。

// www.javascriptcn.com code example
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
      }),
    ],
  },
};

按需加载

我们可以使用 Webpack 的 Code Splitting 功能来将代码分割成多个文件，然后按需加载。

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

图片压缩

我们可以使用 Webpack 的 image-webpack-loader 来压缩图片。

// www.javascriptcn.com code example
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'img/[name].[hash:7].[ext]',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
};

缓存打包结果

Webpack 在每次打包时都会重新生成文件，这会浪费很多时间。我们可以使用缓存来避免重新生成文件。

使用 cache-loader

我们可以使用 cache-loader 来缓存打包结果。

// www.javascriptcn.com code example
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader',
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

使用 HardSourceWebpackPlugin

HardSourceWebpackPlugin 是一个 Webpack 插件，可以将模块缓存到磁盘上，避免重复编译。

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HardSourceWebpackPlugin(),
  ],
};

使用 Tree Shaking

Tree Shaking 是一种只打包使用到的代码的技术，可以减小打包体积。我们可以使用以下方式实现 Tree Shaking。

使用 ES6 模块

我们可以使用 ES6 模块来实现 Tree Shaking。ES6 模块只会导入使用到的代码，不会导入未使用的代码。

// www.javascriptcn.com code example
// module.js
export const a = () => {};

export const b = () => {};

// main.js
import { a } from './module.js';

a();

使用 UglifyJsPlugin

我们可以使用 Webpack 的 UglifyJsPlugin 插件来实现 Tree Shaking。需要在 optimization 配置中设置 usedExports 为 true。

// www.javascriptcn.com code example
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: {
            unused: true,
          },
        },
      }),
    ],
    usedExports: true,
  },
};

使用动态导入

动态导入是一种按需加载模块的技术，可以减小打包体积。我们可以使用以下方式实现动态导入。

使用 import()

我们可以使用 import() 函数来实现动态导入。

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

使用 React.lazy()

React.lazy() 是一个 React API，可以实现动态导入组件。

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

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

以上就是 Webpack 的性能优化技巧。通过使用多进程打包、减小打包体积、缓存打包结果、使用 Tree Shaking 和使用动态导入，我们可以提升 Webpack 的打包速度，让开发效率更高。

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

Webpack 的性能优化技巧