Detailliertes Beispiel einer für Vue-Cli optimierten Webpack-Konfiguration

Das jüngste Projekt hat die geschäftige Phase des Infrastrukturaufbaus hinter sich und ich werde mich allmählich entspannen. Ich werde meine jüngsten Webpack-Optimierungsmaßnahmen aufzeichnen, in der Hoffnung, einen Rückblick auf das Vergangene zu haben und Neues zu lernen. In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Webpack-Konfiguration basierend auf der Vue-CLI-Optimierung vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Das Projekt verwendet den Vue Family 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. Extrahieren Sie gemeinsame Bibliotheken durch externe Konfiguration unter Berufung auf cdn

2. CommonsChunkPlugin richtig konfigurieren

3. Alias ​​gut nutzen

4. DLLplugin aktiviert Vorkompilierung

5. Happypack Multi-Core-Build-Projekt

Externe

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.

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 gemeinsame Module mit mehreren Eintrags-Chunks. 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 Import- oder Anforderungsaliase, um die Moduleinführung zu erleichtern. Zum Beispiel einige gängige Module im Ordner src/:

Durch meine eigene Praxis sind jedoch die letzten drei Punkte für mein eigenes Projekt am besten optimiert. Der Artikel erklärt außerdem hauptsächlich die folgenden Punkte im Detail

Es stellt sich heraus, dass die zum Verpacken eines Projekts erforderliche Zeit im Grunde etwa 40 Sekunden beträgt. Wie lange wird es also dauern, bis die nächsten drei Optimierungsschritte durchlaufen sind

1. Verwenden Sie DLLplugin zum Vorkompilieren und Referenzieren

Warum sollten Sie DLL überhaupt referenzieren? 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.

Dll existiert nach dem Packen unabhängig, solange die darin enthaltenen Bibliotheken nicht vergrößert, verkleinert oder aktualisiert werden, ändert sich der Hash nicht, sodass der Online-DLL-Code nicht häufig mit Versionsveröffentlichungen aktualisiert werden muss . 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, wirken sich Änderungen in anderen Geschäftsdateien auf die Optimierung des Builds durch den Cache aus, was dazu führt, dass jedes Mal erneut nach relevanten Dateien im npm-Paket gesucht werden muss. Nach der Verwendung der DLL ist kein Neupacken erforderlich, solange die enthaltenen Bibliotheken nicht aktualisiert, hinzugefügt oder gelöscht werden. Dies verbessert auch die Build-Geschwindigkeit.

Wie verwende ich also DLL, um das Projekt zu optimieren?

Erstellen Sie zunächst eine DLL-Konfigurationsdatei und führen Sie die für das Projekt erforderlichen 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 die Optimierung gesehen hat, verstehen wird, was das 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 folgende Pfad 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 angezeigt Auf derselben Ebene des Verzeichnisses wird eine Datei namens „verdor.js“ im Ordner „dist“ generiert, die den komprimierten Code der Eintragsabhängigkeiten enthält. Die andere Datei ist „verdor-manifest.json“ im Ordner „dll“, der jede Bibliothek indiziert nach Nummer. Und verwenden Sie die ID anstelle des Namens.

Als nächstes müssen Sie nur noch eine Codezeile zum Plugin in Ihrer Webpack-Konfigurationsdatei hinzufügen.

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

Wenn Sie zu diesem Zeitpunkt den Webpack-Befehl ausführen, können Sie feststellen, dass die Zeit stark von 40 Sekunden auf etwa 20 Sekunden gesunken ist ? (Ich weiß nicht, ob das so ist, weil ich mich auf zu viele Bibliotheken verlasse, ich verdecke mein Gesicht manuell).

2.happypack-Multithread-Kompilierung

Im Allgemeinen führt node.js die Kompilierung in einem einzelnen Thread durch, während happypack das Multithreading des Knotens für die Konstruktion startet, was eine erhebliche Verbesserung darstellt die Baugeschwindigkeit. Auch die Art der Anwendung ist relativ einfach. Erstellen Sie am Beispiel meines Projekts einen neuen Happypack-Prozess im Plug-In und ersetzen Sie dann den Ort, an dem der Loader verwendet wird, durch die entsprechende 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秒的时间也可以了。

相关推荐：

图文解析如何使用vue-cli脚手架

实例详解vue-cli vscode 配置 eslint

如何使用 vue-cli 开发多页应用方法

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel einer für Vue-Cli optimierten Webpack-Konfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!