So optimieren Sie die Webpack-Konfiguration

Dieses Mal zeige ich Ihnen, wie Sie die Webpack-Konfiguration optimieren und welche Vorsichtsmaßnahmen für die Optimierung der Webpack-Konfiguration gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Das jüngste Projekt hat die geschäftige Phase des Infrastrukturaufbaus hinter sich, und es hat sich allmählich entspannt. Ich werde meine jüngsten Webpack-Optimierungsmaßnahmen aufzeichnen, in der Hoffnung, einen Rückblick auf das Vergangene zu haben und Neues zu lernen .

Das Projekt verwendet den Vue-Familien-Bucket und die Build-Konfiguration wurde basierend auf Vue-Cli verbessert. In Bezug auf die ursprüngliche Webpack-Konfiguration können Sie diesen Artikel zur Webpack-Konfigurationsanalyse von vue-cli#2.0 lesen. Der Artikel erklärt im Wesentlichen jede Codezeile in der Datei im Detail, was Ihnen hilft, Webpack besser zu verstehen.

Nach sorgfältiger Zusammenfassung basiert meine Optimierung im Wesentlichen auf den im Internet verbreiteten Punkten

1. Gemeinsame Bibliotheken durch externe Konfiguration extrahieren, CDN referenzieren

2. CommonsChunkPlugin ordnungsgemäß konfigurieren

3. Alias ​​sinnvoll nutzen

4. dllplugin Vorkompilierung aktivieren

5. Happypack Multi-Core-Build-Projekt

Äußerlichkeiten

Dokumentadresse https://doc.webpack-china.org/configuration/externals/

Verhindern Sie, dass bestimmte importierte Pakete in Bundles gepackt werden, und beziehen Sie diese externen Abhängigkeiten stattdessen zur Laufzeit von außen.

CommonsChunkPlugin

Dokumentadresse https://doc.webpack-china.org/plugins/commons-chunk-plugin/

Das CommonsChunkPlugin-Plugin ist eine optionale Funktion zum Erstellen einer unabhängigen Datei (auch Chunk genannt). Diese Datei enthält mehrere Eintrags-Chunks. öffentliches Modul. Durch die Trennung der gemeinsamen Module kann die endgültige synthetisierte Datei zu Beginn einmal geladen und dann zur späteren Verwendung im Cache gespeichert werden. Dies führt zu Geschwindigkeitsverbesserungen, da der Browser den allgemeinen Code schnell aus dem Cache zieht, anstatt bei jedem Zugriff auf eine neue Seite eine größere Datei zu laden.

resolve.alias

Dokumentadresse https://doc.webpack-china.org/configuration/resolve/#resolve-alias

Erstellen Sie Aliase für den Import oder require, um den Modulimport zu vereinfachen. Beispielsweise befinden sich einige allgemeine Module im Ordner src/:

Durch meine eigene Praxis sind jedoch die letzten drei Punkte für mein eigenes Projekt am besten optimiert. Der Artikel erläutert hauptsächlich auch die folgenden Punkte im Detail

Es stellt sich heraus, dass die zum Verpacken eines Projekts erforderliche Zeit im Wesentlichen etwa 40 Sekunden beträgt. Wie lange wird es dauern, die nächsten drei Schritte der Optimierung durchzuführen?

1. Verwenden Sie dllplugin zum Vorkompilieren und Referenzieren

Warum überhaupt auf DLL verweisen? Nachdem ich einige Artikel im Internet durchgesehen hatte, stellte ich fest, dass die Verwendung der Webpack-DLL neben der Beschleunigung des Builds noch einen weiteren Vorteil hat.

Nachdem die DLL gepackt wurde, existiert sie unabhängig, solange die darin enthaltenen Bibliotheken nicht hinzugefügt, gelöscht oder aktualisiert werden. Daher muss der Online-DLL-Code nicht häufig mit Versionsveröffentlichungen aktualisiert werden. Da es sich bei den mit DLL gepackten Dateien grundsätzlich um unabhängige Bibliotheksdateien handelt, besteht ein Merkmal dieser Art von Dateien darin, dass sie sich nicht wesentlich ändern. Wenn wir diese Bibliotheksdateien normalerweise in eine app.js packen, wird aufgrund von Änderungen in anderen Geschäftsdateien die Cache-Optimierung des Builds beeinträchtigt, was dazu führt, dass jedes Mal erneut nach zugehörigen Dateien im npm-Paket gesucht werden muss Zeit. . Nach der Verwendung der DLL, solange die enthaltene Bibliothek nicht aktualisiert wurde, Erhöhen oder verringern, kein Umpacken erforderlich. Dies verbessert auch die Build-Geschwindigkeit.

So verwenden Sie DLL, um das Projekt zu optimieren

Erstellen Sie zunächst eine DLL--Konfigurationsdatei und führen Sie die für das Projekt benötigten Bibliotheken von Drittanbietern ein. Das Besondere an dieser Art von Bibliothek ist, dass sie bei Versionsveröffentlichungen nicht häufig aktualisiert werden muss und langfristig stabil ist.

const webpack = require('webpack');
const path = require('path');
module.exports = {
 entry: {
  //你需要引入的第三方库文件
  vendor: ['vue','vuex','vue-router','element-ui','axios','echarts/lib/echarts','echarts/lib/chart/bar','echarts/lib/chart/line','echarts/lib/chart/pie',
   'echarts/lib/component/tooltip','echarts/lib/component/title','echarts/lib/component/legend','echarts/lib/component/dataZoom','echarts/lib/component/toolbox'],
 },
 output: {
  path: path.join(dirname, 'dist-[hash]'),
  filename: '[name].js',
  library: '[name]',
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(dirname, 'dll', '[name]-manifest.json'),
   filename: '[name].js',
   name: '[name]',
  }),
 ]
};

Die grundlegenden Konfigurationsparameter sind im Grunde die gleichen wie bei Webpack. Ich glaube, dass jeder, der etwas über Optimierung gelesen hat, verstehen wird, was es bedeutet, daher werde ich es nicht erklären. Führen Sie dann den Code aus, um die Datei zu kompilieren. (Meine Konfigurationsdatei wird im Build abgelegt und der Pfad unten muss entsprechend dem Projektpfad geändert werden)

webpack -p --progress --config build/webpack.dll.config.js

Nach Abschluss der Ausführung werden zwei neue Dateien auf derselben Ebene des Verzeichnisses generiert. Eine davon ist verdor.js im Ordner dist, die den komprimierten Code der Eintragsabhängigkeiten enthält . manifest.json, indiziert jede Bibliothek nach Nummer und verwendet die ID anstelle des Namens.

接下去你只要去你的webpack配置文件的里的plugin中添加一行代码就ok了。

const manifest = require('./dll/vendor-manifest.json');
...
...,
plugin:[
  new webpack.DllReferencePlugin({
    context: dirname,
    manifest,
  }),
]

这时候再执行webpack命令，可以发现时间直接从40秒锐减到了20s左右，整整快了一倍有木有(不知道是不是因为自己依赖库太多了才这样的，手动捂脸)。

2.happypack多线程编译

一般node.js是单线程执行编译，而happypack则是启动node的多线程进行构建，大大提高了构建速度。使用方法也比较简单。以我项目为例,在插件中new一个新的happypack进程出来，然后再使用使用loader的地方替换成对应的id

var HappyPack = require('happypack');
...
...
modules:{
  rules : [
    ...
    {
      test: /\.js$/,
      loader:[ 'happypack/loader?id=happybabel'],
      include: [resolve('src')]
    },
    ...
  ]
},
...
...
plugin:[
  //happypack对对 url-loader,vue-loader 和 file-loader 支持度有限，会有报错，有坑。。。
  new HappyPack({
     id: 'happybabel',
     loaders: ['babel-loader'],
     threads: 4,//HappyPack 使用多少子进程来进行编译
  }),
  new HappyPack({
     id: 'scss',
     threads: 4,
     loaders: [
        'style-loader',
        'css-loader',
        'sass-loader',
     ],
  })
]

这时候再去执行编译webpack的代码，打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大，不知道是不是因为本身js比重占据太大的缘故)。

3.善用alias

3.配合resolve，善用alias

本来是没有第三点的，只不过在搜索网上webpack优化相关文章的时候，看到用人提到把引入文件改成库提供的文件(原理我理解其实就是1.先通过resolve指定文件寻找位置，减小搜索范围；2.直接根据alias找到库提供的文件位置)。

vue-cli配置文件中提示也有提到这一点，就是下面这段代码

resolve: {
  //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
  extensions: ['.js', '.vue', '.json'],
  //模块别名定义，方便后续直接引用别名，无须多写长长的地址
  alias: {
   'vue$': 'vue/dist/vue.esm.js',//就是这行代码，提供你直接引用文件
   '@': resolve('src'),
  }
 },

然后我将其他所有地方关于vue的引用都替换成了vue$之后，比如

// import 'vue';
import 'vue/dist/vue.esm.js';

时间竟然到了12s，也是把我吓了一跳。。。

然后我就把jquery，axios，vuex等等全部给替换掉了。。。大概优化到了9s左右，美滋滋，O(∩_∩)O~~

4.webpack3升级

本来是没第四点，刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点，比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件

// 2017-08-13配合最新升级的webpack3提供的新功能，可以使压缩的代码更小，运行更快
...
plugin : [
  new webpack.optimize.ModuleConcatenationPlugin(),
]

不过在添加这行代码之后，构建时间并没有太大变化，不过运行效率没试过，不知道新的效果怎么样

好了基本上感觉就是以上这些效果对项目的优化最大，虽然没有到网上说的那种只要3~4秒时间那么变态，不过感觉基本8,9秒的时间也可以了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular 4中显示CSS样式

vue综合组件通信使用案例

Das obige ist der detaillierte Inhalt vonSo optimieren Sie die Webpack-Konfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!