So beschleunigen und optimieren Sie den Vue-CLI-Code

Dieses Mal zeige ich Ihnen, wie Sie den Vue-CLI-Code beschleunigen und optimieren können. Was sind die Vorsichtsmaßnahmen, um den Vue-CLI-Code zu beschleunigen und zu optimieren? Fall, werfen wir einen Blick darauf.

Vorwort

Mit der Globalisierung von Vue sind verschiedene Vue-Komponenten-Frameworks immer perfekter geworden. Von der frühen Element-UI bis hin zu Vux, iview und anderen hochwertigen Projekten ist die Verwendung von Vue für die Front-End-Konstruktion bereits eine technische Aufgabe >Modularisierung, Agile Dinge

Ich glaube, dass viele Leute die offizielle Vue-Cli-Initialisierungsprojektvorlage wählen und sie dann durch die Einführung von Komponenten-Frameworks und -Tools von Drittanbietern entwickeln und erstellen werden. Ich persönlich empfehle diesen Ansatz wärmstens. Allerdings ist die von vue-cli initialisierte Projektvorlage schließlich für alle Entwickler gedacht und es wird gewisse Kompromisse hinsichtlich der Kompatibilität geben. Ich glaube, viele Leute haben nach verschiedenen Artikeln zur Optimierung des Webpack-Aufbaus gesucht, aber viele davon sind entweder zu alt oder nicht streng

Ziel dieses Artikels ist es, ein Gleichgewicht zwischen zeitaufwändiger Optimierung und Verbesserung der Build-Leistung zu finden, d

Gedanken

In den frühen Versionen von vue-cli und webpack2 wurden die folgenden optimierten Konfigurationen im Internet verbreitet, aber tatsächlich erfordern die neuen Versionen von vue-cli und webpack3 kein

mehr Verwenden Sie ParallelUglifyPlugin, um UglifyPlugin zu ersetzen (die neue Version von UglifyPlugin unterstützt und aktiviert bereits standardmäßig Multithread-Parallel-Builds, daher ist dieser Schritt nicht erforderlich)

1. Schalten Sie Scope Hoisting von webpack3 (der neuen Version von vue -cli wurde mit webapck3 konfiguriert und diese Konfiguration ist standardmäßig aktiviert)

2. Alias ​​gut nutzen (die neue Version von vue-cli hat diese Arbeit bereits erledigt)

3. CommonsChunkPlugin so konfigurieren, dass der öffentliche Code extrahiert wird (die neue Version von vue-cli hat dies bereits getan)

4. Für die neue Version von vue-cli und webpack3 kann die folgende einfache Konfiguration die Build-Geschwindigkeit nach der Optimierung um mindestens das Zweifache erhöhen

Referenz auf Anfrage

1. Happypack-Multi-Core-Build-Projekt aktivieren

2. Quellkartenkonfiguration ändern

3. DllPlugin aktivieren und DllReferencePlugin Vorkompilierte Bibliotheksdateien

Üben

1. Angebot auf Anfrage

1.1 Fast alle Komponenten-Frameworks von Drittanbietern bieten On-Demand-Referenzmethoden für Komponenten. Mithilfe des Plug-Ins babel-plugin-import können Sie Komponenten bei Bedarf laden und die Dateigröße reduzieren um die .babelrc-Datei zu ändern

1.2 Fügen Sie dann nach Bedarf Komponenten hinzu, um die Größe zu reduzieren

npm install babel-plugin-import --save-dev
// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

2. Happypack-Multi-Core-Build-Projekt aktivieren

import { Button } from 'iview'
Vue.component('Table', Table)

Ändern Sie nach der Installation von Happypack die Datei /build/webpack.base.conf.js

3. Ändern Sie die Quellkartenkonfiguration

npm install happypack --save-dev
// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
 new HappyPack({
  id: 'happy-babel-js',
  loaders: ['babel-loader?cacheDirectory=true'],
  threadPool: happyThreadPool,
 })
 ]
// 修改引入loader
{
 test: /\.js$/,
 // loader: 'babel-loader',
 loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
 include: [resolve('src'), resolve('test')]
}

3.1 Ändern Sie zunächst die Datei /config/index.js

3.2 Ändern Sie dann die Datei /src/main.js und deaktivieren Sie die Debugging-Informationen der Produktionsumgebung

// /config/index.js
dev环境：devtool: 'eval'（最快速度）
prod环境：productionSourceMap: false（关闭source-map）

4. Aktivieren Sie die vorkompilierten Bibliotheksdateien DllPlugin und DllReferencePlugin

// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode

Dies ist der komplizierteste Schritt und der offensichtlichste Schritt zur Verbesserung des Effekts. Das Prinzip besteht darin, die Bibliotheksdateien von Drittanbietern einmal separat zu kompilieren und zu packen. Es ist nicht erforderlich, die Bibliotheken von Drittanbietern in nachfolgenden Builds zu kompilieren und zu packen > 4.1 Fügen Sie die Datei build/webpack.dll.config.js hinzu und konfigurieren Sie die Module, die separat per DLL ausgeführt werden müssen

4.2 Fügen Sie die folgenden Plug-Ins

const path = require("path")
const webpack = require("webpack")
module.exports = {
 // 你想要打包的模块的数组
 entry: {
  vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
 },
 output: {
  path: path.join(dirname, '../static/js'), // 打包后文件输出的位置
  filename: '[name].dll.js',
  library: '[name]_library'
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(dirname, '.', '[name]-manifest.json'),
   name: '[name]_library',
   context: dirname
  }),
  // 压缩打包的文件
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

zu build/webpack.dev.conf.js und build/webpack.prod.conf.js hinzu 4.3 Fügen Sie den Befehl

new webpack.DllReferencePlugin({
  context: dirname,
  manifest: require('./vendor-manifest.json')
})

in /package.json hinzu 4.4 DLL-basierte JS-Einführung in /index.html hinzufügen (muss zuerst eingeführt werden)

"dll": "webpack --config ./build/webpack.dll.config.js"

4.5 Führen Sie den Build aus

<script></script>

Postskriptum

npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build

Nachdem die oben genannten vier Hauptschritte abgeschlossen sind, haben wir die Optimierung und Verbesserung des vue-cli-Vorlagenprojekts abgeschlossen. Obwohl es immer noch nicht einfach zu sein scheint, ist dies bereits die einfachste Optimierung, und es gibt noch mehr Tricks und Tricks Ich habe es nicht erweitert, weil ich denke, dass zu viel Optimierungskonfiguration von geringer Bedeutung ist, aber zu viel Redundanz und Komplexität in das Projekt bringen wird Der tatsächliche Test-Build-Effekt der obigen Konfiguration wurde von ursprünglich 13 Sekunden auf etwa 6 Sekunden reduziert, und die Hot-Bereitstellung betrug sogar Millisekunden

Das Wichtigste ist, dass die einfachste Konfiguration problemlos neu konfiguriert und verwendet werden kann, nachdem vue-cli und webpack in Zukunft auf neue Versionen aktualisiert wurden. Nach einer kompetenten Konfiguration dauert die Wiederherstellung der Konfiguration nur etwa 5 Minuten. Allein die Änderung der Konfiguration in 5 Minuten kann die Geschwindigkeit jedes Builds um mehr als das Zweifache erhöhen. Sind Sie nicht ein wenig aufgeregt? Lassen Sie mich hier noch ein paar Worte sagen. Tatsächlich ist das Upgrade von Webpack2 auf Webpack3 für mich ziemlich enttäuschend, da es das Problem der übermäßig komplexen Konfiguration immer noch nicht löst in der Welt, Es sollte mehr aus der Perspektive der Benutzerfreundlichkeit/Menschlichkeit betrachtet werden

Jedes Mal schaue ich mir die verschiedenen .babelrc, .postcssrc.js ... und verschiedenen .confs in den Webpack-Projektdateien an und sogar verschiedene Haupt-, Index- und App-Dateien. Ich kann nicht anders, als mich darüber zu beschweren, warum sich die Front-End-Konstruktion so entwickelt hat. In einem guten Projekt gibt es mehr als ein Dutzend

Konfigurationsdateien

, ist es wirklich notwendig? Ich dachte ursprünglich, dass webpack3 das alles einfacher machen würde, aber das war nicht der Fall. Da es jedoch vorerst keine Möglichkeit gibt, dies zu ändern, können wir die Prinzipien so gut wie möglich verstehen und unser Bestes geben, um sie zu vereinfachen. optimieren Ich glaube, dass Sie die Methode zum Lesen dieses Artikels beherrschen. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website.

Empfohlene Lektüre:

HTML+JS zur Implementierung einer rollenden Digitaluhr

So verwenden Sie den Navigationsschutz von VueRouter

Detaillierte Erläuterung der Schritte zur Implementierung der Tabellenpaginierung mit vue+element

                                   

Das obige ist der detaillierte Inhalt vonSo beschleunigen und optimieren Sie den Vue-CLI-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!