So implementieren Sie die Optimierung der Webpack2-Projektverpackung in vue-cli

Jetzt werde ich mit Ihnen einen Artikel über die Optimierung der Vue-Cli-Webpack2-Projektverpackung teilen, der einen guten Referenzwert hat und ich hoffe, dass er für alle hilfreich sein wird.

Dateisuchumfang reduzieren

Resolve.modules konfigurieren

Resolve.modules des Webpacks konfigurieren Speicherort der Modulbibliothek (d. h. node_modules) Wenn import 'vue' in js erscheint, der kein relativer oder absoluter Pfad ist, wird er im Verzeichnis node_modules gefunden. Die Standardkonfiguration wird jedoch durch eine aufwärts gerichtete rekursive Suche gefunden. Normalerweise befindet sich jedoch nur ein Knotenmodul im Projektstammverzeichnis. Um den Suchbereich zu reduzieren, können Sie den vollständigen Pfad direkt angeben node_modules; ähnlich für Aliase (Das Gleiche gilt für die Konfiguration von „alias“):

function resolve (dir) {
 return path.join(__dirname, '..', dir)
}
module.exports = {
 resolve: {
 extensions: ['.js', '.vue', '.json'],
 modules: [
  resolve('src'),
  resolve('node_modules')
 ],
 alias: {
  'vue$': 'vue/dist/vue.common.js',
  'src': resolve('src'),
  'assets': resolve('src/assets'),
  'components': resolve('src/components'),
  // ...
  'store': resolve('src/store')
 }
 },
 ...
}

Test & include & exclude angemessen festlegen

test: Bedingungen, die erfüllt sein müssen erfüllt (regulärer Ausdruck, keine Anführungszeichen hinzufügen, passende zu verarbeitende Dateien)

exclude: Bedingungen, die nicht erfüllt werden können (Verzeichnisse ausschließen, die nicht verarbeitet werden)

include: Der Pfad oder das Dateiarray dass die importierte Datei vom Loader konvertiert wird (zu verarbeitende Verzeichnisse sind enthalten)

Dadurch können unnötige Traversierungen und damit Leistungseinbußen reduziert werden.

Codekomprimierungstool ersetzen

Das von Webpack standardmäßig bereitgestellte UglifyJS-Plug-in ist aufgrund der Single-Thread-Komprimierung langsam;

webpack-parallel -uglify- Das Plugin-Plugin kann das UglifyJS-Plugin parallel ausführen, wodurch die CPU-Ressourcen umfassender und sinnvoller genutzt werden, was die Erstellungszeit erheblich verkürzen kann

Natürlich sollte das Plugin in der Produktionsumgebung verwendet werden Gehen Sie nach der Installation des Plugins wie folgt vor:

// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
//  warnings: false,
//  drop_console: true
// },
// sourceMap: true
// }),
// 增加 webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
 cacheDir: '.cache/', // 设置缓存路径，不改动的调用缓存，第二次及后面build时提速
 uglifyJS:{
 output: {
  comments: false
 },
 compress: {
  warnings: false
 }
 }
})

habe auch den gleichen Plug-in-Typ webpack-uglify-parallel ausprobiert, aber er war nicht so effektiv wie webpack-parallel-uglify -plugin (es kann von Projekt zu Projekt variieren, Sie können es zum Vergleich in Ihrem Projekt verwenden).

Das vom Webpack-Parallel-Uglify-Plugin-Plugin erzeugte Paket ist etwas größer (aber nicht offensichtlich) als das von UglifyJsPlugin. Ich habe mich für die Geschwindigkeit entschieden (nachdem ich es verwendet habe). es sank von 40 Sekunden auf 40 Sekunden auf 19 Sekunden).

Statische Dateien kopieren

Verwenden Sie das Copy-Webpack-Plugin: Kopieren Sie die Dateien im angegebenen Ordner in das angegebene Verzeichnis. Die Konfiguration lautet wie folgt:

var CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
 ...
 // copy custom static assets
 new CopyWebpackPlugin([
 {
  from: path.resolve(__dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
 }
 ])
]
DllPlugin & DllReferencePlugin

Das Konzept der DLL sollte von der DLL des Windows-Systems übernommen werden. Ein DLL-Paket ist eine rein abhängige Bibliothek. Es kann nicht alleine ausgeführt werden und wird als Referenz in Ihrer App verwendet.

Beim Packen einer DLL erstellt Webpack einen Index aller enthaltenen Bibliotheken und schreibt sie in eine Manifestdatei. Der Code, der auf die DLL verweist (DLL-Benutzer), muss diese Manifestdatei beim Packen nur lesen. das ist es.

1. Fügen Sie die Datei webpack.dll.conf.js unter dem Projekt-Build-Ordner mit dem folgenden Inhalt hinzu:

var path = require('path')
var webpack = require('webpack')
module.exports = {
 entry: {
 vendor: [ // 这里填写需要的依赖库
  'babel-polyfill',
  'axios',
  'vue/dist/vue.common.js',
  'vue-router',
  'pingpp-js',
  "region-picker"
 ]
 },
 output: {
 path: path.resolve(__dirname, '../static/js'),
 filename: '[name].dll.js',
 library: '[name]_library'
 },
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader'
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
  }
 ]
 },
 plugins: [
 new webpack.optimize.ModuleConcatenationPlugin(),
 new webpack.DllPlugin({
  path: path.join(__dirname, '.', '[name]-manifest.json'),
  libraryTarget: 'commonjs2',
  name: '[name]_library'
 }),
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false
  }
 })
 ]
}

2. Fügen Sie den Plugin-Abschnitt in der Datei webpack.prod.conf.js hinzu:

plugins: [
 ...
 // copy custom static assets
  new webpack.DllReferencePlugin({
    context: path.resolve(__dirname, '..'),
    manifest: require('./vendor-manifest.json')
  })
]

3. Fügen Sie Folgendes zur Datei index.html hinzu das Projektstammverzeichnis:

<body>
  <p id="app"></p>
  <!-- built files will be auto injected -->
  <script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script>   //添加这句，路径可根据所需修改
</body>

4. Fügen Sie den Befehl zum Packen der DLL in package.json

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

hinzu 5, Befehlssequenz

npm run build:dll //打包一次之后依赖库无变动不需要执行
npm run build

Vorteile

Dll existiert nach dem Packen unabhängig, da Solange die darin enthaltenen Bibliotheken nicht hinzugefügt werden, ändert sich der Hash nicht, selbst wenn er reduziert oder aktualisiert wird, sodass der Online-DLL-Code nicht häufig mit Versionsveröffentlichungen aktualisiert werden muss.

Nachdem der App-Teilcode geändert wurde, müssen Sie nur den App-Teilcode und den DLL-Teil kompilieren. Solange die enthaltenen Bibliotheken nicht vergrößert, verkleinert oder aktualisiert werden, ist kein Neupacken erforderlich. Dadurch wird auch die Geschwindigkeit jeder Kompilierung erheblich verbessert.

Angenommen, Sie haben mehrere Projekte, die dieselben abhängigen Bibliotheken verwenden, dann können sie sich eine DLL teilen.

19s->15s

Babels Cache-Verzeichnis auf true setzen

Babel-Loader in webpack.base.conf.js ändern:

loader: 'babel-loader?cacheDirectory=true',

15s->14s

Setzen Sie noParse

Wenn Sie sicher sind, dass es keine weiteren neuen Abhängigkeiten in einem Modul gibt, können Sie dies konfigurieren, Webpack Die Abhängigkeiten in dieser Datei werden nicht mehr gescannt, was die Leistung für relativ große Klassenbibliotheken verbessert. Weitere Informationen finden Sie in der folgenden Konfiguration:

module: {
 noParse: /node_modules\/(element-ui\.js)/,
 rules: [
  {
   ...
  }
}
happypack

Das Obige ist das, was ich für alle kompiliert habe hilfreich für alle in der Zukunft.

Verwandte Artikel:

Benutzerberechtigungskontrolle in Vue2.0

WeChat-Zahlung über vue.js

Detaillierte Erklärung zur Implementierung von Vuex (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Optimierung der Webpack2-Projektverpackung in vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!