suchen
HeimWeb-Frontendjs-TutorialProbleme im Zusammenhang mit der Optimierungskonfiguration in Webpack

Dieser Artikel stellt hauptsächlich das relevante Wissen zur Webpack-Optimierung vor – die Eingrenzung des Dateisuchumfangs. Der Artikel stellt die Optimierungsmöglichkeiten detaillierter vor.

Webpack beginnt ab Im konfigurierten Eintrag werden die Importanweisungen in der Datei analysiert und dann rekursiv analysiert.

Wenn Webpack auf eine Importanweisung stößt, führt es zwei Dinge aus:

1. Suchen Sie die entsprechende Datei, die gemäß der Importanweisung importiert werden soll. Beispielsweise ist die Datei, die der Importanweisung require('react') entspricht, ./node_modules/react/react.js, und die Datei, die require('./util') entspricht, ist ./util.js.

2. Verwenden Sie den Loader in der Konfiguration, um die Datei basierend auf dem gefundenen Suffix der zu importierenden Datei zu verarbeiten. Beispielsweise müssen mit ES6 entwickelte JavaScript-Dateien mit Babel-Loader verarbeitet werden.

Obwohl die beiden oben genannten Dinge für die Verarbeitung einer Datei sehr schnell sind, wird die Anzahl der Dateien sehr groß, wenn das Projekt groß wird, und das Problem der langsamen Build-Geschwindigkeit wird aufgedeckt.

Obwohl die beiden oben genannten Dinge nicht vermieden werden können, müssen sie minimiert werden, um die Geschwindigkeit zu erhöhen.

Im Folgenden werden Möglichkeiten zur schrittweisen Optimierung vorgestellt.

Loader-Konfiguration optimieren

Da der Konvertierungsvorgang von Dateien durch Loader zeitaufwändig ist, ist es notwendig, so wenige Dateien wie möglich zuzulassen vom Loader verarbeitet werden.

In Modul 2-3 wurde eingeführt, dass Sie bei Verwendung von Loader die drei Konfigurationselemente „Testen“, „Einschließen“ und „Ausschließen“ verwenden können, um die Dateien zu ermitteln, auf die Loader Regeln anwenden möchte.

Damit möglichst wenige Dateien vom Loader verarbeitet werden können, können Sie „include“ verwenden, um nur die Dateien auszuwählen, die verarbeitet werden müssen.

Nehmen Sie ein Projekt mit ES6 als Beispiel. Wenn Sie Babel-Loader konfigurieren, können Sie Folgendes tun:

module.exports = {
 module: {
  rules: [
   {
    // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/,提升正则表达式性能
    test: /\.js$/,
    // babel-loader 支持缓存转换出的结果,通过 cacheDirectory 选项开启
    use: ['babel-loader?cacheDirectory'],
    // 只对项目根目录下的 src 目录中的文件采用 babel-loader
    include: path.resolve(__dirname, 'src'),
   },
  ]
 },
};

Sie können die Verzeichnisstruktur des Projekts entsprechend anpassen, um das Einbinden bei der Konfiguration von Loader zu erleichtern. Reduzieren Sie die Trefferfläche.

Optimieren Sie die Konfiguration von „resolve.modules“

Eingeführt in 2-4 Resolve, wird „resolve.modules“ verwendet, um Webpack zu konfigurieren in Modulen von Drittanbietern gesucht werden.

Der Standardwert von „resolve.modules“ ist ['node_modules'] . Dies bedeutet, dass Sie zuerst zum Verzeichnis ./node_modules im aktuellen Verzeichnis gehen müssen, um das gesuchte Modul zu finden. Wenn es nicht gefunden wird, gehen Sie nach oben -Ebenenverzeichnis ../node_modules. Wenn nicht, suchen Sie in ../../node_modules usw. Dies ist dem Modulsuchmechanismus von Node.js sehr ähnlich.

Wenn die installierten Module von Drittanbietern im Verzeichnis ./node_modules unter dem Projektstammverzeichnis abgelegt werden, ist es nicht erforderlich, Schicht für Schicht auf die Standardmethode zu suchen. Sie können den absoluten Pfad zum Speichern angeben Drittanbietermodul. Um die Suche zu reduzieren, lautet die Konfiguration wie folgt:

module.exports = {
 resolve: {
  // 使用绝对路径指明第三方模块存放的位置,以减少搜索步骤
  // 其中 __dirname 表示当前工作目录,也就是项目根目录
  modules: [path.resolve(__dirname, 'node_modules')]
 },
};

Resolve.mainFields-Konfiguration optimieren

Eingeführt in 2-4 Auflösen, „resolve.mainFields“ wird zum Konfigurieren verwendet, welche Eintragsdatei das Drittanbietermodul verwendet.

Das installierte Modul eines Drittanbieters verfügt über eine package.json-Datei, mit der die Eigenschaften des Moduls beschrieben werden. Einige der Felder werden verwendet, um zu beschreiben, wo sich die Eintragsdatei „resolve.mainFields“ befindet Das Feld wird als Eintragsdatei verwendet.

Der Grund dafür, dass es mehrere Felder geben kann, die die Eintragsdatei beschreiben, liegt darin, dass einige Module gleichzeitig in mehreren Umgebungen verwendet werden können und für verschiedene Betriebsumgebungen unterschiedliche Codes verwendet werden müssen.

Nehmen Sie als Beispiel isomorphic-fetch, eine Implementierung der Fetch-API, die jedoch sowohl in Browser- als auch in Node.js-Umgebungen verwendet werden kann.

Es gibt 2 Eingabedateibeschreibungsfelder in seiner package.json:

{
 "browser": "fetch-npm-browserify.js",
 "main": "fetch-npm-node.js"
}

isomorphic-fetch In verschiedenen Betriebsumgebungen werden unterschiedliche Codes verwendet. Im Browser über nativen Abruf oder XMLHttpRequest implementiert und über das http-Modul in Node.js implementiert.

Der Standardwert von „resolve.mainFields“ bezieht sich auf die aktuelle Zielkonfiguration. Die entsprechende Beziehung ist wie folgt:

  • Wenn das Ziel Web oder Webworker ist, ist der Wert ist ["browser", "module", "main"]

  • Wenn das Ziel andere Situationen sind, ist der Wert ["module", "main"]

Nehmen Sie „target equal to web“ als Beispiel. Webpack verwendet zunächst das Browserfeld im Modul eines Drittanbieters, um die Eintragsdatei des Moduls zu finden bald.

Um die Suchschritte zu reduzieren, können Sie bei der Angabe des Eingabedateibeschreibungsfelds des Drittanbietermoduls so wenig wie möglich festlegen.

Da die meisten Module von Drittanbietern das Hauptfeld verwenden, um den Speicherort der Eintragsdatei zu beschreiben, kann Webpack wie folgt konfiguriert werden:

module.exports = {
 resolve: {
  // 只采用 main 字段作为入口文件描述字段,以减少搜索步骤
  mainFields: ['main'],
 },
};

Wenn Sie diese Methode zur Optimierung verwenden, müssen Sie Folgendes beachten Berücksichtigen Sie alle Laufzeitabhängigkeiten. Selbst wenn ein Modul im Eintragsdateibeschreibungsfeld des Drittanbietermoduls falsch ist, wird der erstellte Code möglicherweise nicht normal ausgeführt.

Resolve.alias-Konfiguration optimieren

Das in 2-4 Resolve eingeführte Konfigurationselement „resolve.alias“ ordnet den ursprünglichen Importpfad durch Aliase zu ein neuer Importpfad.

In tatsächlichen Projekten verlassen wir uns häufig auf einige große Module von Drittanbietern. Am Beispiel der React-Bibliothek ist die Verzeichnisstruktur der im Verzeichnis node_modules installierten React-Bibliothek wie folgt:

├── dist
│   ├── react.js
│   └── react.min.js
├── lib
│   ... 还有几十个文件被忽略
│   ├── LinkedStateMixin.js
│   ├── createClass.js
│   └── React.js
├── package.json
└── react.js

可以看到发布出去的 React 库中包含两套代码:

  • 一套是采用 CommonJS 规范的模块化代码,这些文件都放在 lib 目录下,以 package.json 中指定的入口文件 react.js 为模块的入口。

  • 一套是把 React 所有相关的代码打包好的完整代码放到一个单独的文件中,这些代码没有采用模块化可以直接执行。其中 dist/react.js 是用于开发环境,里面包含检查和警告的代码。 dist/react.min.js 是用于线上环境,被最小化了。

默认情况下 Webpack 会从入口文件 ./node_modules/react/react.js 开始递归的解析和处理依赖的几十个文件,这会时一个耗时的操作。

通过配置 resolve.alias 可以让 Webpack 在处理 React 库时,直接使用单独完整的 react.min.js 文件,从而跳过耗时的递归解析操作。

相关 Webpack 配置如下:

module.exports = {
 resolve: {
  // 使用 alias 把导入 react 的语句换成直接使用单独完整的 react.min.js 文件,
  // 减少耗时的递归解析操作
  alias: {
   'react': path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
  }
 },
};

除了 React 库外,大多数库发布到 Npm 仓库中时都会包含打包好的完整文件,对于这些库你也可以对它们配置 alias。
但是对于有些库使用本优化方法后会影响到后面要讲的 使用 Tree-Shaking 去除无效代码 的优化,因为打包好的完整文件中有部分代码你的项目可能永远用不上。

一般对整体性比较强的库采用本方法优化,因为完整文件中的代码是一个整体,每一行都是不可或缺的。

但是对于一些工具类的库,例如 lodash ,你的项目可能只用到了其中几个工具函数,你就不能使用本方法去优化,因为这会导致你的输出代码中包含很多永远不会执行的代码。

优化 resolve.extensions 配置

在导入语句没带文件后缀时,Webpack 会自动带上后缀后去尝试询问文件是否存在。

在 2-4 Resolve 中介绍过 resolve.extensions 用于配置在尝试过程中用到的后缀列表,默认是:

extensions: ['.js', '.json']

也就是说当遇到 require('./data') 这样的导入语句时,Webpack 会先去寻找 ./data.js 文件,如果该文件不存在就去寻找 ./data.json 文件,如果还是找不到就报错。

如果这个列表越长,或者正确的后缀在越后面,就会造成尝试的次数越多,所以 resolve.extensions 的配置也会影响到构建的性能。

在配置 resolve.extensions 时你需要遵守以下几点,以做到尽可能的优化构建性能:

  • 后缀尝试列表要尽可能的小,不要把项目中不可能存在的情况写到后缀尝试列表中。

  • 频率出现最高的文件后缀要优先放在最前面,以做到尽快的退出寻找过程。

  • 在源码中写导入语句时,要尽可能的带上后缀,从而可以避免寻找过程。例如在你确定的情况下把 require('./data') 写成 require('./data.json') 。

相关 Webpack 配置如下:

module.exports = {
 resolve: {
  // 尽可能的减少后缀尝试的可能性
  extensions: ['js'],
 },
};

优化 module.noParse 配置

在 2-3 Module 中介绍过 module.noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析处理,这样做的好处是能提高构建性能。

原因是一些库,例如 jQuery 、ChartJS, 它们庞大又没有采用模块化标准,让 Webpack 去解析这些文件耗时又没有意义。

在上面的 优化 resolve.alias 配置 中讲到单独完整的 react.min.js 文件就没有采用模块化,让我们来通过配置 module.noParse 忽略对 react.min.js 文件的递归解析处理,

相关 Webpack 配置如下:

const path = require('path');
module.exports = {
 module: {
  // 独完整的 `react.min.js` 文件就没有采用模块化,忽略对 `react.min.js` 文件的递归解析处理
  noParse: [/react\.min\.js$/],
 },
};

注意被忽略掉的文件里不应该包含 import 、 require 、 define 等模块化语句,不然会导致构建出的代码中包含无法在浏览器环境下执行的模块化语句。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在微信小程序中如何获取用户信息(详细教程)

使用百度地图如何去掉marker覆盖物具体该如何解决

在微信小程序中如何实现animation动画

在微信小程序中如何才能获取图片信息

Wie lösche ich das angegebene Overlay mithilfe der Baidu Maps API?

Das obige ist der detaillierte Inhalt vonProbleme im Zusammenhang mit der Optimierungskonfiguration in Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Jenseits des Browsers: JavaScript in der realen WeltJenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

JavaScript: Erforschung der Vielseitigkeit einer WebspracheJavaScript: Erforschung der Vielseitigkeit einer WebspracheApr 11, 2025 am 12:01 AM

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenDie Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Entmystifizieren JavaScript: Was es tut und warum es wichtig istEntmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Ist Python oder JavaScript besser?Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AM

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

Wie installiere ich JavaScript?Wie installiere ich JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript erfordert keine Installation, da es bereits in moderne Browser integriert ist. Sie benötigen nur einen Texteditor und einen Browser, um loszulegen. 1) Führen Sie sie in der Browser -Umgebung durch, indem Sie die HTML -Datei durch Tags einbetten. 2) Führen Sie die JavaScript -Datei nach dem Herunterladen und Installieren von node.js nach dem Herunterladen und Installieren der Befehlszeile aus.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool