vue-admin-template を使用した最適化手順の詳細な説明

今回は、vue-admin-template を使用するための最適化手順と、vue-admin-template を使用して最適化するための 注意事項 について詳しく説明します。以下は実際のケースです。見てみましょう。 。

はじめに

当社は、開発を容易にするために、バックエンド管理システムを備えたいくつかのプロジェクトを開発用の基本テンプレートとして選択しました。しかし、私がそれを使い始めたとき、作者はこれを最適化していませんでした。プロジェクトがオンラインになったとき、パッケージ化されたファイルが非常に大きく、1 つのベンダーだけで 770k のボリュームがあることがわかりました (下の写真は基本的なテンプレートです。すべてが含まれています)。パッケージ化されたファイル情報を追加しない場合):

は、webpack-bundle-analyzer 分析を通じて取得できます。ボリュームは主に Ele.me UI から取得されます (ボリュームは 500k)。分割コンポーネントを部分的に導入すると、webpack がコンポーネント ライブラリ全体をパッケージ化します。 2 つ目は vue 自体で、サイズは 80k です。

webpack-bundle-analyzer 进行分析可得，体积主要来源于饿了么UI（体积为 500k），因为没对其进行部分引入拆分组件，导致 webpack 把整个组件库都打包进去了。其次就是 vue 本身，体积也达到了 80k 之大。

所以，对其进行打包优化，是一件刻不容缓的事情。

优化

优化主要目的有：

1. 加快资源加载速度，减少用户等待的时间和首页白屏时间，提高用户体验。

2. 加快打包速度，不要将时间浪费在等待打包上。

解决第一个问题，很多人都会想到资源文件放在 CDN 上就好了，没错，这次我们就是通过 CDN 来解决加载问题。

CDN - 提高加载速度

像 vue， element ui 这些比较成熟的框架/组件库，一般都有免费、高速、公共的 cdn 供开发者使用，鉴于大部分用户均在国内，所以这次使用了 bootcdn 这个库。该库热门资源比较齐全，各个版本都有，而且国内访问速度很快，简直是开发者的福音。

在 index.html 中引入 vue 和 饿了么组件。

nbsp;html>

 
  <meta>
  <meta>
  <title>vue-admin-template</title>
  <!-- 同时也要引入对应版本的 css -->
  <link>
 
 
  <p></p>
  <!-- built files will be auto injected -->
  <!-- 先引入 Vue -->
  <script></script>
  <!-- 引入组件库 -->
  <script></script>
  <script></script>
 

因为依赖是从外部引入的，所以需要告知 webpack 在打包时，依赖的来源。

修改 webpack.base.conf.js：

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

再一次打包，确实能极大的压缩了打包的体积，从 700k 骤减至 130k：

但是随之而来的就有问题了：

明明我在本地开发，但是由于引入了线上的生产版本的 vue 文件，因此 vue-dev-tools 就不能进行调试。

因此，我们需要再次调整一下 webpack 的配置，webpack.base.conf.js，而且 webpack 注入的 js 总是在最后面的，因此，我们需要 html-webpack-include-assets-plugin 帮忙在注入 app.js 后，再注入相对应的组件库 :

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，这时候，既能兼顾打包后的体积大小，也能在开发模式中使用 vue-dev-tool 进行调试。

DLL - 提高打包速度

经常打包的前端会发现，很多时候，我们为了修复某些bug（如 promise 在 ie Safari 下的 bug），而新引入了一个 polyfill，然而，打包完后发现，vendor 的 hash 值变了，而整个 vendor 只新加了一个 es6-promise

それでは、パッケージの最適化は緊急の問題です。

🎜🎜🎜最適化🎜🎜🎜🎜最適化の主な目的は次のとおりです: 🎜

1. 🎜リソースの読み込み速度を高速化し、ユーザーの待ち時間とホームページのホワイト スクリーン時間を削減します。ユーザーエクスペリエンスを向上させます。 🎜
2. 🎜梱包をスピードアップし、梱包を待つ時間を無駄にしません。 🎜

🎜 最初の問題を解決するために、多くの人はリソース ファイルを CDN に配置できると考えるでしょう。はい、今回は CDN を介して読み込みの問題を解決します。 🎜🎜🎜🎜CDN - 読み込み速度の向上🎜🎜🎜🎜 vue や element ui などのより成熟したフレームワーク/コンポーネント ライブラリには、ほとんどのユーザーが中国にいるという事実を考慮して、通常、開発者が使用できる無料の高速パブリック CDN があります。 , そこで今回はbootcdnライブラリを使用しました。このライブラリの人気のあるリソースは比較的完全で、さまざまなバージョンで利用でき、国内のアクセス速度が非常に速いため、開発者にとっては単純に良いニュースです。 🎜🎜vue コンポーネントと Ele.me コンポーネントを index.html に導入します。 🎜

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

🎜 依存関係は外部から導入されるため、パッケージ化するときに webpack に依存関係のソースを通知する必要があります。 🎜🎜 webpack.base.conf.js を変更します: 🎜

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

🎜 再度パックします。これにより、実際にパッケージ サイズを 700k から 130k に大幅に圧縮できます: 🎜🎜🎜🎜しかし、問題もあります:🎜 🎜🎜🎜もちろんローカル開発ですが、オンライン制作の導入によりvue ファイルのバージョンが異なると、vue-dev-tools をデバッグできません。 🎜🎜 したがって、Webpack 構成、webpack.base.conf.js を再度調整する必要があります。Webpack によって挿入された JS は常に最後にあるため、html-webpack が必要です - include-assets-plugin は、app.js を挿入してから、対応するコンポーネント ライブラリを挿入するのに役立ちます: 🎜

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.

🎜OK。このとき、パッケージ化されたサイズを考慮することができます。開発モードでのデバッグには vue-dev-tool も使用します。 🎜🎜🎜🎜DLL - パッケージング速度の向上🎜🎜🎜🎜 パッケージ化を頻繁に行うフロントエンドでは、特定のバグ (IE Safari での Promise バグなど) を修正するために、新しいポリフィルを導入しています。終了後、ベンダーのハッシュ値が変更され、ベンダー全体が es6-promise の新しい依存関係を追加しただけであることがわかりました。しかし、その代償として、以前にパッケージ化されたベンダーを破棄する必要がありました。ユーザーが再度アクセスした場合は、新しいベンダーを再度取得する必要がありますが、これには少し費用がかかります。 🎜🎜現時点では、dllPlugin パッケージを使用すると利点があります。いくつかの基本的な依存モジュールを最初にパッケージ化できるため、これらのモジュールをスキップしてベンダーに繰り返しパッケージ化することがなくなり、パッケージ化の速度が向上し、ベンダーのサイズも削減されます。 🎜

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

1. axios： ajax 请求。

2. vuex： 全局状态管理。

3. js-cookie： 前端处理 cookie

4. 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></p>
<!-- built files will be auto injected -->
<script></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中文网其它相关文章！

推荐阅读：

如何使用v-model与promise两种方式实现vue弹窗组件

怎样使用Vue+Jwt+SpringBoot+Ldap完成登录认证

以上がvue-admin-template を使用した最適化手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。