Maison > Article > interface Web > Explication détaillée des étapes d'optimisation à l'aide de vue-admin-template

Explication détaillée des étapes d'optimisation à l'aide de vue-admin-template

php中世界最好的语言original: 2018-05-28 15:06:024044parcourir

Cette fois, je vais vous donner une explication détaillée des étapes à suivre pour optimiser à l'aide de vue-admin-template. Quelles sont les précautions pour utiliser vue-admin-template pour optimiser. , jetons un coup d'oeil.

Avant-propos

L'entreprise a plusieurs projets avec des systèmes de gestion backend Afin de faciliter le développement, nous avons choisi le modèle backend populaire en vue. Développé comme modèle de base. Cependant, lorsque j'ai commencé à l'utiliser, l'auteur n'a pas optimisé cela. Lorsque le projet a été mis en ligne, j'ai découvert que les fichiers packagés étaient très volumineux, avec un seul fournisseur ayant un volume de 770 Ko (l'image ci-dessous est le modèle de base, tout). est sans ajouter d'informations sur le fichier packagé) :

peut être analysé via webpack-bundle-analyzer Le volume provient principalement de l'interface utilisateur Ele.me (le volume est de 500 000), car il y en a. non correct Il introduit partiellement des composants divisés, ce qui oblige Webpack à empaqueter l'intégralité de la bibliothèque de composants. La seconde est la vue elle-même, qui a une taille de 80 ko.

Il est donc urgent d'optimiser son packaging.

Optimisation

Les principaux objectifs de l'optimisation sont :

Accélérer le chargement des ressources et réduisez le temps d'attente des utilisateurs et le temps d'écran blanc de la page d'accueil pour améliorer l'expérience utilisateur.
Accélérez le conditionnement et ne perdez pas de temps à attendre l'emballage.

Pour résoudre le premier problème, beaucoup de gens penseront que les fichiers de ressources peuvent être placés sur CDN Oui, cette fois nous allons résoudre le problème de chargement via CDN.

CDN - Améliorer la vitesse de chargement

Les frameworks/bibliothèques de composants plus matures comme vue et element ui ont généralement un accès gratuit et haut débit au public cdn est destiné aux développeurs. Comme la plupart des utilisateurs se trouvent en Chine, la bibliothèque bootcdn est utilisée cette fois. Les ressources populaires de cette bibliothèque sont relativement complètes, disponibles en différentes versions, et la vitesse d'accès domestique est très rapide, ce qui est tout simplement une bonne nouvelle pour les développeurs.

Introduire les composants vue et Ele.me dans index.html.

<!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>

Étant donné que les dépendances sont importées de l'extérieur, webpack doit être informé de la source des dépendances lors de l'empaquetage.

Modificationwebpack.base.conf.js :

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

Le packaging à nouveau peut en effet compresser considérablement la taille du colis, de 700k à 130k :

Mais ensuite il y a des problèmes :

Évidemment, je développe localement, mais en raison de l'introduction de la version de production en ligne du fichier vue, vue-dev-tools ne peut donc pas être débogué .

Par conséquent, nous devons à nouveau ajuster la configuration de webpack, webpack.base.conf.js, et le js injecté par webpack est toujours à la fin, nous avons donc besoin de html-webpack-include-assets-plugin pour aider à injecter app.js après la bibliothèque de composants correspondante :

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,
 ...
}

OK À ce stade, vous pouvez non seulement prendre en compte la taille du package, mais également utiliser vue-dev-tool pour le débogage en mode développement.

DLL - Améliorer la vitesse de packaging

Les front-ends qui emballent souvent le trouveront plusieurs fois, afin de corriger certains bugs (tels que promesse dans ie bug sous Safari), et un nouveau polyfill a été introduit. Cependant, après l'emballage, il a été constaté que la valeur de hachage du fournisseur a changé, et l'ensemble du fournisseur n'a ajouté qu'une nouvelle dépendance de es6-promise, mais le prix. payé est que le précédent doit être abandonné Lorsque l'utilisateur visite à nouveau le fournisseur packagé, il doit à nouveau choisir un tout nouveau fournisseur, ce qui est assez coûteux.

À l'heure actuelle, l'utilisation du packaging dllPlugin présente des avantages. Il peut d'abord regrouper certains modules dépendants de base. Lors de l'empaquetage officiel, ces modules peuvent être ignorés et ne plus être empaquetés de manière répétée dans le fournisseur. Cela améliore la vitesse d'empaquetage et réduit également la taille du fournisseur.

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

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

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

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

执行 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.

同时，可以在 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>

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

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

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

再次打包：

$ 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.

发现 vendor 现在只有 40k 的体积，减少了一半的体积，而且打包速度也快了 2s，而相对于最开始的基础模板，打包速度快了 12s，这是很让人欣慰。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Articles Liés

Voir plus