Detaillierte Erläuterung der Schritte zur Implementierung der mehrseitigen Entwicklung und Verpackung von Vue

Dieses Mal werde ich Ihnen die Schritte zur Implementierung der mehrseitigen Entwicklung und Verpackung von Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen zur Implementierung der mehrseitigen Entwicklung und Verpackung von Vue? Werfen wir einen Blick darauf.

Als ich vor einiger Zeit an einem Projekt arbeitete, war der Technologie-Stack vue+webpack, hauptsächlich die offizielle Website-Homepage und das Backend-Management-System Damals habe ich drei Optionen analysiert

1. Ein Projektcode bettet zwei Spa-Anwendungen ein (offizielle Website und Backend-System)

2. Zwei Projektsätze trennen Quellcode

3. Es gibt nur eine Spa-Anwendung in einer Reihe von Projektquellcodes

Denken:

1. Negiert direkt eine in einer Reihe von Projektquellcode-Spa-Anwendungen (UI-Stile überdecken sich gegenseitig, wenn es keine Codespezifikation gibt, wird es später schwierig sein, sie beizubehalten)

2. Zwei Sätze Quellcode, zwei Ports können im Hintergrund geöffnet werden, und die Verwendung des Nginx-Reverse-Proxy kann problematisch sein, und die Front-End-Entwicklung ist schließlich auch problematisch Sie müssen zwei Git-Lager und zwei Sätze von Git-Online-Prozessen verwalten, was viel Zeit verschwenden kann.

3. Ich bin (blind) von meiner eigenen Technologie überzeugt und möchte neue Dinge ausprobieren. Es ist nicht sehr kompliziert, die Bedürfnisse zu analysieren. Ich habe mich für die erste Option entschieden, bei der mehrere einseitige Anwendungen in einem Satz Quellcode angewendet werden

Das Strukturdiagramm der vorherigen mehrseitigen Anwendung

Vue Spa-Vorlage herunterladen

npm install vue-cli -g
vue init webpack multiple-vue-amazing

Mehrseitige Anwendung ändern

npm install glob --save-dev

Ändern Sie die Verzeichnisstruktur unter der src-Ordner

Hinzufügen

/* 这里是添加的部分 ---------------------------- 开始 */
// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
// 页面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(dirname, '../src/pages')
// 用于做相应的merge处理
var merge = require('webpack-merge')
//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function () {
 var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
 var map = {}
 entryFiles.forEach((filePath) => {
  var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
  map[filename] = filePath
 })
 return map
}
//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function () {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
  let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
  let conf = {
   // 模板来源
   template: filePath,
   // 文件名称
   filename: filename + '.html',
   // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
   chunks: ['manifest', 'vendor', filename],
   inject: true
  }
  if (process.env.NODE_ENV === 'production') {
   conf = merge(conf, {
    minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
   })
  }
  arr.push(new HtmlWebpackPlugin(conf))
 })
 return arr
}
/* 这里是添加的部分 ---------------------------- 结束 */
webpack.base.conf.js 文件
/* 修改部分 ---------------- 开始 */
 entry: utils.entries(),
 /* 修改部分 ---------------- 结束 */
webpack.dev.conf.js 文件
/* 注释这个区域的文件 ------------- 开始 */
 // new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 /* 注释这个区域的文件 ------------- 结束 */
 new FriendlyErrorsPlugin()
 /* 添加 .concat(utils.htmlPlugin()) ------------------ */
 ].concat(utils.htmlPlugin())
webpack.prod.conf.js 文件
/* 注释这个区域的内容 ---------------------- 开始 */
 // new HtmlWebpackPlugin({
 // filename: config.build.index,
 // template: 'index.html',
 // inject: true,
 // minify: {
 //  removeComments: true,
 //  collapseWhitespace: true,
 //  removeAttributeQuotes: true
 //  // more options:
 //  // https://github.com/kangax/html-minifier#options-quick-reference
 // },
 // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 // chunksSortMode: 'dependency'
 // }),
 /* 注释这个区域的内容 ---------------------- 结束 */
 // copy custom static assets
 new CopyWebpackPlugin([
  {
  from: path.resolve(dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
  }
 ])
 /* 该位置添加 .concat(utils.htmlPlugin()) ------------------- */
 ].concat(utils.htmlPlugin())

Führen Sie eine Drittanbieter-UI-Bibliothek in util.js ein

npm install element-ui bootstrap-vue --save

Führen Sie eine andere Benutzeroberfläche ein verschiedene Seiten. index.js

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

admin.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Die Konfiguration der mehreren Seiten oben basiert auf dem Internet, und die Ideen im Internet sind größtenteils ähnlich Nachdem die Konfiguration abgeschlossen war, wurde während der Entwicklung kein Problem festgestellt, und die Entwicklung dauerte etwa einen Monat. Bei der Leistungsanalyse auf der offiziellen Website wurde festgestellt, dass die Netzwerkladezeit des Anbieters zu hoch war. Die von Webpack gepackten js waren besonders lang, was zu einem sehr langen weißen Bildschirm auf dem ersten Bildschirm führte. Schließlich wurde die Schlussfolgerung durch die -webpack-bundle-analyzer-Analyse

npm run build --report

gezogen Sie werden feststellen, dass Vendor.js die gemeinsamen Teile von index.html und admin.html enthält, sodass dieses Vendor-Paket dazu bestimmt ist, groß und redundant zu sein

Lösung

Da der Anbieter zu groß ist und zu langsamem Laden führt, ist es in Ordnung, den Anbieter zu trennen. Das ist meiner Meinung nach: Extrahieren Sie den auf jeder Seite verwendeten Code von Drittanbietern in Vendor.js und packen Sie dann den auf jeder Seite verwendeten Code von Drittanbietern in seine eigene Vendor-x.js, z. B. den vorhandenen Seitenindex .html , admin.html, Vendor.js, Vendor-index.js, Vendor-admin.js werden schließlich gepackt.

webpack.prod.conf.js-Datei

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor-admin',
  chunks: ['vendor'],
  minChunks: function (module, count) {
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(path.join(dirname, '../node_modules')) === 0 &&
   module.resource.indexOf('element-ui') != -1
  )
  }
 }),
 new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor-index',
  chunks: ['vendor'],
  minChunks: function (module, count) {
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(path.join(dirname, '../node_modules')) === 0 &&
   module.resource.indexOf('bootstrap-vue') != -1
  )
  }
 }),

Noch einmal eine Analyse, alles ist in Ordnung, Vendor.js ist unterteilt in Vendor.js, Vendor-Index, Vendor-Admin.js

Ich dachte ursprünglich, dass es das Problem der Trennung von seller.js von CommonsChunkPlugin löst, und das war's. Dann habe ich es gepackt und festgestellt, dass sowohl index.html als auch admin.html fehlten ein Import (entsprechend jedem) Vendor-xx.js)

Lösung

Dieses Problem ist tatsächlich ein Problem mit HtmlWebpackPlugin. Ändern Sie die ursprüngliche chunksSortMode: 'Abhängigkeit' wie folgt in die Konfiguration der benutzerdefinierten Funktion

util.js-Datei

chunksSortMode: function (chunk1, chunk2) {
   var order1 = chunks.indexOf(chunk1.names[0])
   var order2 = chunks.indexOf(chunk2.names[0])
   return order1 - order2
  },

endgültige Implementierung

• Jede Seite lädt ihren eigenen Chunk

• Jede Seite hat unterschiedliche Parameter

• Jede Seite kann öffentliche Chunks teilen

• Browser-Cache, bessere Leistung

• Wenn es immer noch zu langsam ist, aktivieren Sie gzip

Impressionen

Obwohl die Konfiguration sehr einfach aussieht, habe ich bei der Entwicklung lange darüber nachgedacht. Wenn Sie also mit CommonsChunkPlugin und HtmlWebpackPlugin nicht vertraut sind oder nur andere Konfigurationstabellen von Drittanbietern verwenden, Dies kann eine große Gefahr sein. Beispielsweise gibt CommonsChunkPlugin keine Chunks an. Was ist die Standardeinstellung? Die meisten Leute können in minChunks nur einen einzelnen Wert schreiben. Die Schreibmethode der benutzerdefinierten -Definition einer Funktion ist jedoch meiner persönlichen Erfahrung nach die leistungsfähigste Methode, mit der Chunks in Kombination mit der benutzerdefinierten Funktion von minChunks fast alle CommonsChunk-Plugins lösen können . Übernatürliche Ereignisse.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Schritte zur Implementierung dynamischer Daten im Echarts-Knoten

Detaillierte Erläuterung der Verwendung des .sync-Modifikators in vue

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung der mehrseitigen Entwicklung und Verpackung von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!