Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Optimierung der Webpack-Verpackung in Vue
Webpack ist das Standard-Paketierungstool für Reaktionsprojekte. In Verbindung mit NPM ist die Verwendung des Verwaltungsmoduls sehr praktisch. In diesem Artikel wird hauptsächlich die Webpack-Verpackungsoptimierung vorgestellt (VUE-Projekt).
Da das Frühlingsfest näher rückt, gehen viele Kollegen im Unternehmen für das neue Jahr früher nach Hause Wenn die Fehler behoben sind, müssen wir sie für den Betrieb und die Wartung neu verpacken und auf den Testserver stellen, damit die Testkollegen sie testen können Die Zeit ist zu lang (mehr als fünfundzwanzig Minuten: schluchzen :), also gibt es eine Verpackungsoptimierung (tatsächlich hatte ich die Idee schon lange, aber da mein Arbeitsplan normalerweise ziemlich voll ist, habe ich sie nie Diesmal hatte ich zufällig Zeit, also habe ich mir dieses Problem noch einmal überlegt!
Webpack ist das Standard-Paketierungstool für Reaktionsprojekte. Es ist sehr praktisch, das Verwaltungsmodul in Verbindung mit NPM zu verwenden.
webapck betrachtet alle statischen Ressourcen als Modul und kombiniert diese Module mithilfe von Webpack zu einem Bundle, wodurch ein bundle.js auf der Seite eingeführt wird, um alle statischen Ressourcen zu laden.
Beginnen wir ohne Umschweife mit dem Haupttext
Lassen Sie mich Ihnen zunächst die Verzeichnisstruktur des Projekts zeigen:
Das ist es nur ein normales Projekt. Lassen Sie uns kurz über die Struktur sprechen:
Der Build-Ordner enthält einige Verpackungskonfigurationsdinge
Der Konfigurationsordner ist die Basis von die Projektkonfiguration
dist ist die gepackte Datei
node_modules ist das Abhängigkeitspaket des Projekts
src Im Ordner befindet sich der Quellcode des Projekts
Der statische Ordner enthält einige vom Projekt verwendete statische Ressourcen
Index. html ist für die Projekt-Startseite
Die package.json-Datei ist die Konfigurations-JSON des Projekts
yarn.lock ist die Abhängigkeit für die Verwendung von Garn um das Projekt zu sperren
Optimierungsideen
Die Projektverpackung dauert einfach lange Das Gesamtprojekt ist relativ groß, die Abhängigkeiten sind komplex und die Komponenten sind nicht ausreichend getrennt, bevor sie angemessen sind.
Für diese drei Probleme können wir uns mit den folgenden Aspekten befassen:
Routinieren Sie das Projekt und verpacken Sie nur das, was Sie zum Verpacken eines Teils davon benötigen (unser Unternehmen hat mehrere zusammengelegt). Der Grund dafür ist, dass die Bedürfnisse ähnlich sind und es daher einfacher ist, sie zusammenzustellen -_-||| )
Die Abhängigkeitsbeziehung ist kompliziert. Wir sprechen hier von vielen abhängigen Modulen. Für unser aktuelles Projekt gibt es mehr als 40 abhängige Pakete Wichtig ist, dass es Abhängigkeiten mit derselben Referenz zwischen Komponenten gibt. Die Lösung besteht darin, die wiederverwendeten Abhängigkeiten im Projekt zu extrahieren und separat zu verpacken.
Beim Schreiben einer Komponente müssen Sie die Verwendungsrichtung und Implementierungsfunktion dieser Komponente berücksichtigen und dürfen nicht verwechselt werden.
Praktische Bedienung
Sobald Sie die Gesamtidee haben, können Sie mit der Arbeit daran beginnen Dokumentation Es gibt ein DllPlugin. Dieses Plug-in ist der Schlüssel zur Lösung des Problems. Hier ist der Code meiner webpack.dll.config:
var path = require("path");
var webpack = require("webpack");
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: ['vue', 'lodash', 'vuex', 'axios', 'vue-router', 'iview', 'element-ui',
'echarts','xlsx','jquery','vue-fullcalendar','vue-cookie','handsontable']
},
output: {
path: path.join(__dirname, '../dist/vendor-dll-js'), // 打包后文件输出的位置
filename: '[name].dll.js',
library: '[name]_library'
// vendor.dll.js中暴露出的全局变量名。
// 主要是给DllPlugin中的name使用，
// 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// 压缩打包的文件，与该文章主线无关
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};Wir müssen die wiederverwendbaren Pakete aus dem Projekt extrahieren Fügen Sie sie in das Array ein, definieren Sie dann den Dateipfad der gepackten Ausgabe in der Ausgabe unten, konfigurieren Sie dann die Parsing-Parameter in Resolve und definieren Sie schließlich das verwendete DllPlugin-Plug-In
Der Pfad in Dllplugin wird ausgegeben. A vendor-manifest.json, der für die Zuordnungs-ID verwendet wird, wird beim Packen nicht gepackt, sodass es nicht erforderlich ist, ihn statisch abzulegen und dann webpack -p --progress --config build/webpack.dll.conf.js
im Stammverzeichnis und Sie werden den Quellcode und die passende ID der abhängigen Bibliothek sehen . vendor.manifest.json
. Der Grund, warum commonsChunk bei jeder Ausführung gepackt wird, ist, dass wir es nicht ständig aktualisieren Wir beziehen uns auf die abhängigen Bibliotheken, daher besteht der DLL-Ansatz darin, die abhängigen Bibliotheken im Voraus zu packen und dann nur die js zu packen, die jedes Mal geändert werden. commonsChunk
const manifest = require('../vendor-manifest.json')
......
plugins: [
new webpack.DllReferencePlugin({
manifest
})
] Öffnen Sie dann index.html und fügen Sie unten hinzu ; e0ecbfc0a2a6eeff035ef51c8b61dc6b2cacc6d41bbb37262a98f745aa00fbf0
. Wenn alles normal funktioniert, bedeutet dies, dass Ihre Operation korrekt ist. npm run build
Upgrade-Verarbeitung
至此优化的问题基本已经解决了，但是在处理过程中需要进行复制粘贴，还要对index.html文件进行操作，如果是对于项目不熟悉的人来进行开发项目的话，就会出现一些小的问题，所以我决定继续往下研究一下：
思路还是上面的思路，我们下面需要进行的操作呢就是对与之前的处理进行优化，通过配置文件，和命令去实现我们想要的效果
首先我们将上面 webpack.dll.config 文件里面的entry配置项拿出来，在config文件夹下新建一个dll.js
module.exports = {
entry: {
// 这里的依赖顺序必须是：对象从上往下依赖，数组从右到左依赖（如果互不依赖的可以忽略顺序）
ui: ['iview', 'element-ui'],
tool: ['lodash', 'jquery', 'axios', 'vue-fullcalendar'],
vue: ['vue', 'vuex', 'vue-router', 'vue-cookie'],
xlsx: ['xlsx'],
echarts: ['echarts'],
other: ['handsontable'],
},
outFile: '../static/dll'
};这里面其实就是我们一开始写的entry的配置项，根据这个js去打包的文件有一个顺序，就是我总结的这个：
这里的依赖顺序必须是：对象从上往下依赖，数组从右到左依赖（如果互不依赖的可以忽略顺序）
如果不按照这个顺序去写的话，会出现依赖错误的问题！！！
然后在output里面再进行一下配置：
output: {
path: path.join(__dirname, dllConfig.outFile), // 打包后文件输出的位置
filename: '[name].dll.[chunkhash].js',
library: '[name]_library'
// 主要是给DllPlugin中的name使用，
// 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
},这样在执行 webpack -p --progress --config build/webpack.dll.conf.js 指令的时候会生成如下：
是不是看到文件后面的hash就一脸懵逼，这怎么办，我们没有办法去进行复制粘贴了！！（我们的目的不就是不进行复制粘贴吗 正经脸-_-）
要实现命令操作之后不进行复制粘贴操作就需要使用webpack的HtmlWebpackPlugin插件
在plugins里面配置一下HtmlWebpackPlugin
new HtmlWebpackPlugin({
filename: path.join(__dirname, '../', config.dev.index),
template: 'index.ejs',
inject: false
}),然后在根目录添加一个index.ejs模版（ejsGitHub地址 ）， index.ejs中代码如下:
<body>
<p id="app"></p>
<!-- dll files will be auto injected -->
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script type="text/javascript" src="/<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>最后需要在config文件夹下的index.js进行一下修改： 在dev中添加： index: 'index.html',
项目在执行dev指令或者build指令之前需要先执行： webpack -p --progress --config build/webpack.dll.conf.js 在dll指令结束后 执行其他操作就可以完美的玩耍了:blush:
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
通过在Vue中使用vue2-highcharts如何实现曲线数据展示的方法？
通过在Vue中使用vue2-highcharts实现top功能（详细教程）
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Optimierung der Webpack-Verpackung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!