vue-cli コードを高速化して最適化する方法

今回は、vue-cli コードを高速化および最適化する方法を説明します。vue-cli コードを高速化および最適化するための 注意事項 は次のとおりです。

はじめに

Vue のグローバル化に伴い、初期の element-ui から vux、iview、その他の高品質プロジェクトに至るまで、さまざまな Vue コンポーネント フレームワークがますます完成してきており、フロントエンド構築に Vue を使用することは、すでにエンジニアリングのタスクです。 、アジャイルなもの

その中で、多くの人は公式の vue-cli 初期化プロジェクト テンプレートを選択し、サードパーティのコンポーネント フレームワークやツールを導入して開発およびビルドすることになると思いますが、個人的にはこのアプローチを強くお勧めします。ただし、vue-cli によって初期化されるプロジェクト テンプレートは結局のところすべての開発者向けであり、互換性の点である程度の妥協が必要になります。多くの人がさまざまな Webpack 構築の最適化に関する記事を検索していると思いますが、その多くは古すぎるか、厳密ではありません

この記事では、時間のかかる最適化とビルド パフォーマンスの向上の間のバランスをとること、つまり、公式テンプレートへの最小限の時間と最小限の変更でビルド パフォーマンスの最大の向上を実現することを目指しています

感想

vue-cli と webpack2 の初期バージョンでは、次のような最適化された設定がインターネット上に出回っていましたが、実際には、新しいバージョンの vue-cli と webpack3 は不要になりました

1. ParallelUglifyPlugin を使用して UglifyPlugin を置き換えます (新しいバージョンの UglifyPlugin はデフォルトでマルチスレッド並列構築をすでにサポートし、有効にするため、この手順は必要ありません)

webpack3 のスコープホイスティングを有効にする (新しいバージョンの vue-cli は次のように構成されています) webapck3 であり、この設定はデフォルトで有効になっています))
エイリアスを上手に利用してください (vue-cli の新しいバージョンではすでにこれが行われています)
パブリック コードを抽出するように CommonsChunkPlugin を設定します (vue の新しいバージョン-cli はすでにこれを行っています)

新しいバージョンの vue-cli と webpack3 の場合、次の簡単な構成により、最適化後にビルド速度が少なくとも 2 倍向上します

1. オンデマンドで参照する

happypack マルチコア ビルド プロジェクトを有効にする
ソースマップ構成を変更する
DllPlugin および DllReferencePlugin のプリコンパイルされたライブラリ ファイルを有効にする

練習

1. オンデマンドでお見積り

1.1 ほとんどすべてのサードパーティ コンポーネント フレームワークは、コンポーネントのオンデマンド参照を提供します。例として、プラグイン babel-plugin-import を使用すると、コンポーネントをオンデマンドでロードし、ファイル サイズを削減するだけで済みます。 .babelrc ファイルを変更します

npm install babel-plugin-import --save-dev
// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

1.2 次に、必要に応じてコンポーネントを導入してサイズを削減します

import { Button } from 'iview'
Vue.component('Table', Table)

2. happypack マルチコアビルドプロジェクトを有効にする

happypack をインストールした後、/build/webpack.base.conf.js ファイルを変更します

npm install happypack --save-dev
// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
 new HappyPack({
  id: 'happy-babel-js',
  loaders: ['babel-loader?cacheDirectory=true'],
  threadPool: happyThreadPool,
 })
 ]
// 修改引入loader
{
 test: /\.js$/,
 // loader: 'babel-loader',
 loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
 include: [resolve('src'), resolve('test')]
}

3. ソースマップ構成を変更する

3.1 まず /config/index.js ファイルを変更します

// /config/index.js
dev环境：devtool: 'eval'（最快速度）
prod环境：productionSourceMap: false（关闭source-map）

3.2 次に、/src/main.js ファイルを変更し、本番環境のデバッグ情報をオフにします

// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode

4. DllPlugin と DllReferencePlugin のプリコンパイルされたライブラリ ファイルを有効にする

これは最も複雑な手順であり、効果を向上させるための最も明らかな手順です。原則として、サードパーティのライブラリ ファイルを一度個別にコンパイルしてパッケージ化することです。その後のビルドではサードパーティのライブラリをコンパイルしてパッケージ化する必要はありません

。 4.1 build/webpack.dll.config.js ファイルを追加し、個別に DLL する必要があるモジュールを構成します

const path = require("path")
const webpack = require("webpack")
module.exports = {
 // 你想要打包的模块的数组
 entry: {
  vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
 },
 output: {
  path: path.join(dirname, '../static/js'), // 打包后文件输出的位置
  filename: '[name].dll.js',
  library: '[name]_library'
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(dirname, '.', '[name]-manifest.json'),
   name: '[name]_library',
   context: dirname
  }),
  // 压缩打包的文件
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

4.2 次のプラグインを build/webpack.dev.conf.js および build/webpack.prod.conf.js に追加します

new webpack.DllReferencePlugin({
  context: dirname,
  manifest: require('./vendor-manifest.json')
})

4.3 /package.json にコマンド

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

を追加 4.4 /index.html に DLL ベースの JS の導入を追加 (最初に導入する必要があります)

<script src="/static/js/vendor.dll.js"></script>

4.5 ビルドを実行します

npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build

追記

上記の 4 つの主要な手順が完了すると、vue-cli テンプレート プロジェクトの構築の最適化と改善が完了しました。まだ単純ではないように見えますが、これはすでに最も単純な最適化であり、さらに多くのトリックやトリックがあります。あまりにも多くの最適化設定はほとんど意味がないと思うので拡張しませんでしたが、プロジェクトに過剰な冗長性と複雑性をもたらします

上記の構成による実際のテスト ビルド効果は、元の 13 秒から約 6 秒に短縮され、ホット デプロイメントはミリ秒レベルでさえありました

最も重要なことは、最も単純な構成は、将来 vue-cli と webpack を新しいバージョンにアップグレードした後でも簡単に再構成して使用できることです。構成を復元するのにかかる時間はわずか 5 分です。 5 分で構成を変更するだけで、各ビルドの速度が 2 倍以上向上します。少し興奮しませんか:)

。 ここでもう少し言わせてください。実際、webpack2 から webpack3 へのアップグレードは、すべての Web プロジェクトを占有することを目的として構築された製品として、依然として複雑すぎる構成の問題を根本的に解決していないため、私にとっては非常に残念です。世界では、使いやすさや人間性の観点からもっと考慮されるべきです

webpack プロジェクト内のさまざまな .babelrc、.postcssrc.js...、およびさまざまな .conf ファイルを見るたびに、あらゆる種類のメイン ファイル、インデックス ファイル、アプリ ファイルがあり、なぜフロントエンドの構築がこのように発展したのかについて文句を言いたくなりますが、良いプロジェクトには 12 個以上の 設定ファイル が存在します。 . 本当に必要ですか？当初、webpack3 を使えばすべてが簡単になるだろうと思っていましたが、そうではありませんでした。しかし、当分の間、それを変更する方法はないので、私たちができることは、原則をできるだけ理解し、簡素化するために最善を尽くすことです。最適化する この記事を読む方法はもうマスターされたと思います。さらに興味をそそられる場合は、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

HTML+JSでスクロール数字時計を実装する

VueRouterのナビゲーションガードを使用する方法

vue+要素を使用してテーブルページングステップを実装する方法

以上がvue-cli コードを高速化して最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。