Webpack 性能优化实战之（二）减少 Loader 的使用

在前端开发中，Webpack 已成为一个不可或缺的工具。然而，当项目越来越大时，Webpack 的构建速度可能会变得异常缓慢。这时我们需要尝试一些手段，对其进行性能优化。

本篇文章将介绍如何通过减少 Loader 的使用来提升 Webpack 的构建速度。

为什么要减少 Loader 的使用

Loader 是 Webpack 的核心构建器，用于将文件转换为模块并处理它们。但是，如果过多地使用 Loader，在 Webpack 构建的过程中，就会导致构建时间变慢。因此，减少 Loader 的使用可以有效地提升 Webpack 的构建速度。

如何减少 Loader 的使用

引入样式

样式可以使用 style-loader 和 css-loader 进行构建。通常情况下，我们会在 style-loader 之前使用 less-loader 或 sass-loader 来编译 less 或 sass 样式文件。然而，这样做会导致 Webpack 对每个 less 或 sass 文件进行额外的解析和编译，从而增加了构建时间。为了避免这种情况，我们可以直接引入编译后的 css 文件，使得不必再进行额外的解析和编译操作。

/* style.css */
body {
  background: blue;
}

import './style.css';

处理图片

如果我们需要在项目中使用图片，建议使用 url-loader 或 file-loader 进行处理。具体来说，url-loader 将小于指定大小的图片转换成 base64 编码，并将其打包进 JavaScript 文件，从而减少了额外的网络请求。而file-loader 则会对大于指定大小的图片，生成独立的文件并返回其路径。

如果使用 url-loader 对所有图片进行转换操作，则会增加 Webpack 构建时间。为了解决这一问题，可以手动选择需要转换的图片，并使用 file-loader 来处理剩余的图片。这样能够避免不必要的编译和构建过程。

import img1 from './images/1.png';
import img2 from 'file-loader!./images/2.png';

const img3 = new Image();
img3.src = './images/3.png';

其他资源类型

除了图片之外，还存在其他类型的文件需要进行处理。例如，字体文件、模板文件等等。在使用 Loader 帮助我们进行处理时，同样也需要注意减少额外的解析和编译操作。

import font from './fonts/font.ttf';
import template from 'raw-loader!./template.html';

总结

通过本文介绍的方法，我们可以避免在 Webpack 的构建过程中不必要的解析和编译操作，从而提升构建速度。当然，减少 Loader 的使用并不是绝对的优化方法。在实际项目中，我们还需要根据具体情况进行选择和调整。

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