English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Prefazione
Con la globalizzazione di vue, sempre più framework di componenti di vue sono perfetti, dai primi element-ui a vux, iview e altri progetti di alta qualità, utilizzare vue per la costruzione frontend è diventato un'attività di ingegnerizzazione, modularizzazione e agilità
In questo contesto, molte persone scelgono di utilizzare il template di inizializzazione del progetto ufficiale di vue-cli, quindi sviluppano e costruiscono attraverso l'introduzione di framework e strumenti di terze parti, anche io sono molto a favore di questo metodo. Tuttavia, il template di progetto inizializzato da vue-cli è rivolto a tutti gli sviluppatori e deve fare compromessi in termini di compatibilità. Molte persone hanno cercato articoli di ottimizzazione della costruzione di webpack, ma molti di essi sono troppo vecchi o non rigorosi
Questo articolo desidera bilanciare tra l'ottimizzazione del tempo e l'aumento delle prestazioni di costruzione, ovvero spendere il minor tempo possibile per apportare il minor numero di modifiche al template ufficiale, guadagnando il maggior aumento delle prestazioni di costruzione
Pensiero
Nelle prime versioni di vue-cli e dell'era webpack2, in rete si diffondono le seguenti configurazioni ottimizzate, ma le nuove versioni di vue-cli e webpack3 non necessitano più di esse
Per le nuove versioni di vue-cli e webpack3, la configurazione semplice di seguito può migliorare la velocità di costruzione di almeno il doppio
Pratica
1、Riferimento richiesto
1.1 quasi tutti i framework di componenti di terze parti offrono un modo di riferimento richiesto per i componenti, prendendo iview come esempio, attraverso l'aiuto di pluginbabel-plugin-import È possibile caricare i componenti a richieste specifiche, ridurre la dimensione dei file e modificare semplicemente il file .babelrc
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}
1.2 Poi, introducendo i componenti a richieste specifiche, è possibile ridurre la dimensione del file
import { Button } from 'iview'
Vue.component('Table', Table)
2、Abilitare la costruzione multicore di happypack per il progetto
Dopo l'installazione di happypack, modificare il file /build/webpack.base.conf.js
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、修改 source-map 配置
3.1 首先修改 /config/index.js 文件
// /config/index.js dev 环境：devtool: 'eval'（最快速度） prod 环境：productionSourceMap: false（关闭 source-map）
3.2 然后修改 /src/main.js 文件，关闭生产环境的调试信息
// /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 和 DllReferencePlugin 预编译库文件
这是最复杂也是提升效果最明显的一步，原理是将第三方库文件单独编译打包一次，以后的构建都不需要再编译打包第三方库
4.1 添加 build/webpack.dll.config.js 文件，并在其中配置需要单独DLL化的模块
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'), // Posizione di output dei file dopo il packaging
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// Comprimi i file di pacchetto
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
)
]
}
4.2 Aggiungi i plugin seguenti in build/webpack.dev.conf.js e build/webpack.prod.conf.js
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
)
4.3 Aggiungi il comando in /package.json
"dll": "webpack --config ./build/webpack.dll.config.js"
4.4 Aggiungi l'introduzione DLL JS in /index.html (deve essere introdotto prima)
<script src="/static/js/vendor.dll.js"></script>
4.5 Esegui la costruzione
npm run dll (questo passaggio genererà build/vendor-manifest.json e static/js/vendor.dll.js) npm run dev o npm run build
Postilla
Dopo aver completato questi quattro grandi passaggi, abbiamo ottimizzato e migliorato la costruzione del progetto di modello di vue-cli, anche se non è ancora considerato semplice, ma questo è già l'ottimizzazione più semplice possibile, ci sono molte altre tecniche speciali che non sono state espanso, perché penso che un'eccessiva configurazione di ottimizzazione non abbia molto senso, anzi, potrebbe portare troppa complessità e ridondanza al progetto
Il risultato della costruzione testato delle configurazioni è passato da 13 secondi a circa 6 secondi, e il部署 in tempo reale è di livello millisecondo
Soprattutto, la configurazione più semplificata può essere facilmente reimpostata e utilizzata dopo l'aggiornamento del vue-cli e webpack alla nuova versione, e dopo aver configurato una volta, è sufficiente 5 minuti per reimpostare la configurazione. Immagina di spendere 5 minuti per modificare la configurazione, e di ottenere un aumento della velocità di costruzione di oltre il doppio, non è un po' emozionante? :)
Ecco un altro discorso, penso che l'aggiornamento da webpack2 a webpack3 sia stato piuttosto deludente, perché non ha risolto il problema della configurazione troppo complessa alla radice. Come prodotto che mira a coprire la costruzione di tutti i progetti web del mondo, dovrebbe considerare più l'usabilità e l'umanizzazione
Ogni volta che guardo i vari .babelrc, .postcssrc.js... e altri file .conf all'interno del progetto webpack, e persino vari file main, index, app, non posso fare a meno di lamentarmi, perché la costruzione front-end è diventata così, con decine di file di configurazione in un progetto di progetto, è davvero necessario? Credevo che webpack3 avrebbe reso tutto più semplice, ma non è così, tuttavia, dato che non possiamo cambiare nulla al momento, tutto ciò che possiamo fare è cercare di comprendere i principi al meglio, e cercare di semplificare/ottimizzare al massimo
Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e ti prego di supportare e urlare le guide.
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume responsabilità per le relative responsabilità legali. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una email a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di copyright.