Detaillierte Erläuterung der Optimierungsschritte mit vue-admin-template-js-Tutorial-php.cn

Dieses Mal werde ich Ihnen die Schritte zur Optimierung mit vue-admin-template ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von vue-admin-template zur Optimierung? , lass uns einen Blick darauf werfen.

Vorwort

Das Unternehmen verfügt über mehrere Projekte mit Backend-Managementsystemen. Um die Entwicklung zu erleichtern, haben wir uns für die beliebte Backend-Vorlage in vue entschieden. Als Basisvorlage entwickelt. Als ich anfing, es zu verwenden, hat der Autor dies jedoch nicht optimiert. Als das Projekt online ging, stellte ich fest, dass die gepackten Dateien sehr groß waren und nur ein Anbieter ein Volumen von 770 KB hatte (das Bild unten ist die Basisvorlage, alles). ist Ohne gepackte Dateiinformationen hinzuzufügen):

kann über webpack-bundle-analyzer analysiert werden. Das Volumen stammt hauptsächlich aus der Ele.me-Benutzeroberfläche (Volumen beträgt 500 KB), da es vorhanden ist nein richtig Es führt teilweise geteilte Komponenten ein, was dazu führt, dass Webpack die gesamte Komponentenbibliothek verpackt. Das zweite ist Vue selbst, das eine Größe von 80 KB hat.

Daher ist es dringend erforderlich, die Verpackung zu optimieren.

Optimierung

Die Hauptziele der Optimierung sind:

Beschleunigen Sie das Laden von Ressourcen und reduzieren Sie die Wartezeit des Benutzers und die Zeit auf dem weißen Bildschirm auf der Startseite, um das Benutzererlebnis zu verbessern.
Beschleunigen Sie die Verpackung und verschwenden Sie keine Zeit mit dem Warten auf die Verpackung.

Um das erste Problem zu lösen, werden viele Leute denken, dass Ressourcendateien auf CDN platziert werden können. Ja, dieses Mal werden wir das Ladeproblem über CDN lösen.

CDN – Ladegeschwindigkeit verbessern

Ausgereiftere Frameworks/Komponentenbibliotheken wie Vue und Element UI sind im Allgemeinen kostenlos und mit hoher Geschwindigkeit verfügbar cdn ist für Entwickler gedacht. Da sich die meisten Benutzer in China befinden, wird dieses Mal die bootcdn-Bibliothek verwendet. Die beliebten Ressourcen dieser Bibliothek sind relativ vollständig, in verschiedenen Versionen verfügbar und die inländische Zugriffsgeschwindigkeit ist sehr hoch, was für Entwickler einfach eine gute Nachricht ist.

Führen Sie Vue- und Ele.me-Komponenten in index.html ein.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-admin-template</title>
  <!-- 同时也要引入对应版本的 css -->
  <link href="https://cdn.bootcss.com/element-ui/2.3.2/theme-chalk/index.css" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
  <p id="app"></p>
  <!-- built files will be auto injected -->
  <!-- 先引入 Vue -->
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcss.com/element-ui/2.3.2/index.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.3.2/locale/zh-CN.min.js"></script>
 </body>
</html>

Nach dem Login kopieren

Da Abhängigkeiten von außen importiert werden, muss Webpack beim Packen über die Quelle der Abhängigkeiten informiert werden.

Änderungwebpack.base.conf.js:

module.exports = {
 ...
 externals: {
  vue: 'Vue',
  'element-ui':'ELEMENT'
 }
}

Nach dem Login kopieren

Noch einmal verpackt, die Paketgröße wurde tatsächlich stark reduziert, von 700k auf 130k:

Aber dann gibt es Probleme:

Natürlich entwickle ich lokal, aber aufgrund der Einführung der Online-Produktionsversion der Vue-Datei kann dies bei vue-dev-tools nicht der Fall sein debuggt.

Daher müssen wir die Konfiguration des Webpacks erneut anpassen, webpack.base.conf.js, und das vom Webpack injizierte js befindet sich immer am Ende, daher benötigen wir html-webpack-include-assets-plugin, um beim Einfügen app.js nach der entsprechenden Komponentenbibliothek zu helfen :

const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
const externals = {
 // 因为打包时，还没注入，所以这里要去掉。
 // 'element-ui':'ELEMENT'
}
// 生产环境中使用生产环境的 vue
// 开发环境继续使用本地 node_modules 中的 vue
if (process.env.NODE_ENV === 'production') {
 externals['vue'] = 'Vue'
 // 如发现打包时依旧将 element-ui 打包进入 vendor，可以在打包时将其加入外部依赖。
 externals['element-ui'] = 'ELEMENT'
}
// 生产环境默认注入 vue 
// 开发环境中不注入
const defaultJS = process.env.NODE_ENV === 'production' ? [{ path: 'https://cdn.bootcss.com/vue/2.4.2/vue.min.js', type: 'js' }] : []
const plugins = [
 new HtmlWebpackIncludeAssetsPlugin({
   assets: defaultJS.concat([
    { path: 'https://cdn.bootcss.com/element-ui/2.3.2/index.js', type: 'js' },
    { path: 'https://cdn.bootcss.com/element-ui/2.3.2/locale/zh-CN.min.js', type: 'js' },
   ]),
   // 是否在 webpack 注入的 js 文件后新增？true 为 append, false 为 prepend。
   // 生产环境中，这些 js 应该先加载。
   append: process.env.NODE_ENV !== 'production',
   publicPath: '',
  })
]
module.exports = {
 ...
 externals,
 plugins,
 ...
}

Nach dem Login kopieren

OK. Zu diesem Zeitpunkt können Sie nicht nur die Paketgröße berücksichtigen, sondern auch das Vue-Dev-Tool zum Debuggen im Entwicklungsmodus verwenden.

DLL – Paketierungsgeschwindigkeit verbessern

Frontends, die häufig Pakete erstellen, werden dies oft finden, um bestimmte Fehler zu beheben (z. B Versprechen im IE-Fehler unter Safari) und ein neues Polyfill wurde eingeführt. Nach dem Packen wurde jedoch festgestellt, dass sich der Hashwert des Anbieters geändert hat und der gesamte Anbieter nur eine neue Abhängigkeit von es6-promise hinzugefügt hat, aber der Preis Bezahlt ist, dass der vorherige Anbieter verworfen werden muss. Wenn der Benutzer den Paketanbieter erneut besucht, muss er oder sie erneut einen brandneuen Anbieter auswählen, was ziemlich kostspielig ist.

Derzeit hat die Verwendung der dllPlugin-Verpackung Vorteile. Beim offiziellen Packen können diese Module zunächst übersprungen und nicht mehr wiederholt in den Anbieter gepackt werden. Dies verbessert die Paketierungsgeschwindigkeit und verringert auch die Größe des Anbieters.

如，后台管理系统基础模块基本有以下几个：

axios： ajax 请求。
vuex：全局状态管理。
js-cookie：前端处理 cookie
vue-router：路由管理。

这四个基础模块几乎是必须的，那么可以先提取出来。

step 1 打包基础模块

先在 build 文件夹下新建一个用于打包 dll 的配置文件 webpack.dll.conf.js：

const webpack = require('webpack');
const path = require('path');
const vueLoaderConfig = require('./vue-loader.conf')
const utils = require('./utils')
function resolve(dir) {
  return path.join(dirname, '..', dir)
}
const vendor = [
  // 'vue/dist/vue.runtime.esm.js', // 由于 vue 在生产环境中使用的是 cdn 引入，所以也无需提前打包进 dll
  // 'raven-js', // 前端监控，若无此需求，可以忽略。
  'es6-promise', // 修复 promise 中某些 bug。
  'vue-router',
  'js-cookie',
  'axios',
  'vuex',
];
const webpackConfig = {
  context: dirname,
  output: {
    path: path.join(dirname, '../static/js/'),
    filename: '[name].dll.js',
    library: '[name]_[hash]',
  },
  entry: {
    vendor
  },
  plugins: [
    new webpack.DllPlugin({
      context: dirname,
      path: path.join(dirname, '.', '[name]-manifest.json'),
      name: '[name]_[hash]',
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
       warnings: false
      },
      sourceMap: true,
      // parallel: true
    })
  ],
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
};
module.exports = webpackConfig

Nach dem Login kopieren

然后在 package.json 中加入一条命令：

{
  "scripts": {
    ...
    "build:dll": "webpack --config build/webpack.dll.conf.js",
    ...
  }
}

Nach dem Login kopieren

执行 yarn build:dll 或者 npm run build:dll 即可完成打包 dll。执行完成后：

yarn build:dll
yarn run v1.5.1
$ webpack --config build/webpack.dll.conf.js
Hash: f6894dff019b2e0734af
Version: webpack 3.10.0
Time: 1295ms
     Asset   Size Chunks       Chunk Names
vendor.dll.js 62.6 kB    0 [emitted] vendor
  [8] dll vendor 12 bytes {0} [built]
  + 32 hidden modules
✨ Done in 1.89s.

Nach dem Login kopieren

同时，可以在 build 目录下，找到各个模块对应关系文件 vendors-manifest.json 和 static/js 下的 vendor.dll.js。

step 2 页面中引入 vendor

打包后的 dll 文件需要手动在 index.html 引入：

<p id="app"></p>
<!-- built files will be auto injected -->
<script src="static/js/vendors.dll.js"></script>

Nach dem Login kopieren

step 3 告诉 webpack 使用 dllPlugin 进行打包

修改 build/webpack.prod.conf.js:

module.exports = {
  plugins: [
    ...
    new webpack.DllReferencePlugin({
      context: dirname,
      manifest: require('./vendor-manifest.json')
    }),
    ...
  ]
}

Nach dem Login kopieren

再次打包：

$ yarn build:report
yarn run v1.5.1
$ npm_config_report=true node build/build.js
Hash: b4ff51852866ed865cfd
Version: webpack 3.10.0
Time: 6532ms
                       Asset    Size Chunks       Chunk Names
     static/js/manifest.42b9584a653aec2b9c5e.js   1.5 kB    5 [emitted] manifest
             static/img/404.a57b6f3.png  98.1 kB     [emitted]
        static/js/1.9e4133a25808e2101dd3.js    1 kB    1 [emitted]
        static/js/2.2a8a8e01c51473fab882.js  4.34 kB    2 [emitted]
      static/js/vendor.c7b076ef3341d4711402.js  39.4 kB    3 [emitted] vendor
       static/js/app.6d52c7a5bf1bacb5cc85.js  21.4 kB    4 [emitted] app
        static/js/0.cbc645864aab28ae8055.js  15.3 kB    0 [emitted]
static/css/app.1b30f8eba210e245a5f96d7bf0d6fb6c.css   7.6 kB    4 [emitted] app
                    favicon.ico  67.6 kB     [emitted]
                     index.html 986 bytes     [emitted]
              static/js/vendor.dll.js  62.6 kB     [emitted]
 Build complete.
 Tip: built files are meant to be served over an HTTP server.
 Opening index.html over file:// won't work.