Detaillierte Erklärung von vue-CLI von webpack3Umfassende Beschleunigung und Optimierung

Vorwort

Mit der Globalisierung von Vue sind bereits verschiedene Vue-Komponenten-Frameworks immer weiter verbessert worden, von den frühen Element-UI bis zu Vux, iview und immer mehr hochwertigen Projekten wählen, die mit Vue die Frontend-Entwicklung als ein engineering, modular und agil ansehen

Dabei wird sicherlich viele Menschen die offiziellen Vue-Initialisiere das Projekttemplate mit CLI, dann baue durch die Einführung von Drittanbieter-Komponenten-Frameworks und -Tools, ich schätze diese Methode auch sehr. Aber Vue-CLI-Initialisierung des Projektmusters ist schließlich für alle Entwickler gerichtet, und es gibt bestimmte Kompromisse in der Kompatibilität. Viele Menschen haben sicherlich nach Artikeln über die Optimierung von webpack-Build gesucht, aber viele sind zu alt oder nicht streng

Dieser Artikel hofft, eine Balance zwischen der Optimierung der Zeitaufwand und der Verbesserung der Bauleistung zu finden, d.h. so wenig Zeit wie möglich zu investieren, um die offiziellen Templates so wenig wie möglich zu ändern, um die größtmögliche Verbesserung der Bauleistung zu erzielen

Denkweise

frühe Versionen von vue-CLI und webpack2Epoche, im Internet gibt es die folgenden Optimierungskonfigurationen, aber die neue Version von vue-CLI und webpack3braucht nicht mehr

Verwenden Sie ParallelUglifyPlugin anstelle von UglifyPlugin (der neue UglifyPlugin unterstützt bereits das Multi-Thread-Building und ist standardmäßig aktiviert, daher ist dieser Schritt nicht erforderlich)
aktivieren Sie webpack3schespeicherung (vue-Die neue Version von CLI hat bereits webpack konfiguriert3，und diese Konfiguration ist bereits standardmäßig aktiviert)
Nutzen Sie alias (neue Version von vue-CLI hat diese Aufgabe bereits erledigt)
Konfigurieren Sie CommonsChunkPlugin, um öffentliche Code-Teile extrahieren zu können (neue Version von vue-CLI hat diese Aufgabe bereits erledigt)

Für die neue Version von vue-CLI und webpack3，mit einfachen Konfigurationen kann mindestens2fache Bauzeit

bedarfsgerechte Referenzierung
aktivieren Sie die Multicore-Build-Projekte von happypack
Quellcode ändern-map-Konfiguration
Vore kompilieren Sie Bibliotheksdateien mit DllPlugin und DllReferencePlugin

Praxis

1、bedarfsgerechte Referenzierung

1.1fast alle Drittanbieter-Komponentenrahmen bieten eine Möglichkeit zur bedarfsgerechten Referenzierung von Komponenten, z.B. mit iview, durch die Verwendung von Pluginsbabel-plugin-import Es ist möglich, die Komponenten nach Bedarf zu laden und die Dateigröße zu reduzieren, indem nur die .babelrc-Datei geändert wird

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

1.2Dann können Sie die Komponenten nach Bedarf einbinden, um die Größe zu verringern

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

2、aktivieren Sie die Multicore-Build-Projekte von happypack

Nach der Installation von happypack, ändern /build/webpack.base.conf.js Datei installieren

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-Plugin hinzufügen
plugins: [
 new HappyPack({
  id: 'happy-babel-js',
  loaders: ['babel-loader?cacheDirectory=true],
  threadPool: happyThreadPool,
 )
 ]
// Loader-Einführung ändern
{
 test: /\.js$/,
 // loader: 'babel-loader',
 loader: 'happypack/loader?id=happy-babel-js', // Neuen HappyPack-Build-Loader hinzufügen
 include: [resolve('src'), resolve('test')]
}

3、quelle ändern-map-Konfiguration

3.1Zuerst ändern /config/index.js Datei

// /config/index.js
dev-Umgebung: devtool: 'eval' (schnellster Geschwindigkeit)
prod-Umgebung: productionSourceMap: false (quelle schließen)-map）

3.2Dann ändern /src/main.js Datei, Debugging-Informationen in der Produktionsumgebung ausschalten

// /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

4、DllPlugin und DllReferencePlugin zur Vorcompilierung der Bibliotheksdateien aktivieren

Dies ist der komplexeste Schritt und bringt die stärksten Verbesserungen, der den Prinzip ist, dass die Bibliotheken der Drittanbieter einmalig kompiliert und gepackt werden, und die zukünftigen Bauvorgänge benötigen keine erneute Kompilierung und Verpackung der Drittanbieterbibliotheken

4.1 build hinzufügen/webpack.dll.config.js Datei und konfiguriere darin die Module, die als separate DLLs gebündelt werden sollen

const path = require("path")
const webpack = require("webpack")
module.exports = {
 // Array der Module, die Sie packen möchten
 entry: {
  vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
 },
 output: {
  path: path.join(__dirname, '../static/js'), // Position der Ausgabe der gepackten Dateien
  filename: '[name].dll.js',
  library: '[name]_library'
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library',
   context: __dirname
  }),
  // Komprimierung und Packen der Dateien
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  )
 ]
}

4.2 in build/webpack.dev.conf.js und build/webpack.prod.conf.js hinzufügen wie folgt Plugin

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

4.3 in /package.json hinzufügen Befehl

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

4.4 in /index.html hinzufügen DLL-JS-Einbindung (muss zuerst eingebunden werden)

<script src="/static/js/vendor.dll.js"></script>

4.5 Baubeschleunigung ausführen

npm run dll（dieser Schritt generiert build/vendor-manifest.json und static/js/vendor.dll.js）
npm run dev oder npm run build

Nachwort

Nachdem diese vier großen Schritte abgeschlossen sind, haben wir die Optimierung von vue abgeschlossen-Optimierung und Verbesserung der Erstellung von CLI-Projektvorlagen, obwohl es immer noch nicht einfach ist, ist dies bereits die einfachste Optimierung, und es gibt noch viele Tricks, die nicht erweitert wurden, weil ich denke, dass zu viele Optimierungseinstellungen nicht sehr sinnvoll sind und stattdessen zu viel Redundanz und Komplexität in das Projekt bringen könnten

以上的配置实际测试的构建效果是从原先的13秒减少到了6秒左右，热部署更是毫秒级的

最重要的是，最简化的配置，在未来vue-cli和webpack升级新版本后，也可以很容易地重新配置进去使用。熟练配置一次后，重新再还原配置只需要 5分钟左右，想想花5分钟修改一下配置，就能换来每次构建2倍以上的速度提升，是不是会有点小激动呢：）

这里再多说些后话吧，其实webpack2至webpack3的升级，个人觉得相当失望，因为它还是没有从根本上解决其配置过于复杂的问题。作为目标是占领全世界所有web项目构建的产品，它应该更多地从易用性/从人性化的角度去考虑

每一次看着webpack的工程里面的各种.babelrc，.postcssrc.js...还有各种的.conf文件，甚至还有各种的main，index，app文件，就忍不住想吐槽，究竟为什么前端的构建会发展成这样，一个好好的项目工程里，十几种配置文件，真的有必要吗？我原本以为webpack3会将这一切变得简单，然而它并没有，不过既然暂时没有办法去改变，那我们能做的就是，尽可能理解其中原理，尽自己最大的可能去简化。/优化

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发邮件时，请将#更换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）

Grundlagenanleitung

Empfohlene Artikel