vue-cli での webpack3 速度の最適化に関連する問題

この記事では主に vue-cli の webpack3 構築と総合的な高速化の最適化についての詳細な説明を紹介し、参考にさせていただきます。

前書き

vue のグローバル化に伴い、初期の element-ui から vux、iview、その他のますます高品質なプロジェクトに至るまで、vue はすでにフロントエンドに使用されています。これはエンジニアリング、モジュラー、アジャイルなものです

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

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

アイデア

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

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

2. webpack3 のスコープホイスティングを有効にします(新しいバージョンの vue-cli は webapck3 で設定されており、この設定はデフォルトでオンになっています)

3. エイリアスを上手に活用してください (新しいバージョンの vue-cli はすでにこの作業を行っています)

4. パブリック コードを抽出するように CommonsChunkPlugin を設定します (vue-cli の新しいバージョンではこの作業がすでに行われています)

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

1. オンデマンドで参照

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

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

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

練習

1. オンデマンド リファレンス

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

npm install babel-plugin-import --save-dev

// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

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

happypack マルチコア ビルド プロジェクトを有効にします

/build/webpack.base.conf.js ファイル

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

3. ソースマップ設定を変更します

3.1 まず、/config/index.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.2 次に、/src/main を変更します。 js ファイルを作成し、実稼働環境のデバッグ情報をオフにします

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

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

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

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

// /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.2 次のプラグインを build/webpack.dev.conf.js および build/webpack.prod.conf.js に追加します

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.3 /package.json にコマンドを追加します

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

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

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

4.5 ビルドを実行します

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

追記

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

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

最も重要なことは、最も単純な構成で vue-cli が可能になることです将来的には新しいバージョンにアップグレードされる予定です。その後、簡単に再構成して使用することもできます。一度構成すれば、構成を復元するのに 5 分ほどかかります。各ビルドの速度を 2 倍以上向上させることができます。これは少し興奮しませんか :)

ここでさらに一言言わせてください。複雑すぎる構成の問題を根本的に解決することはまだできていません。目標としては、世界中のすべての Web プロジェクトを支配する製品を、使いやすさ/人間性の観点からもっと考慮する必要があります

さまざまな . webpack プロジェクトには、babelrc、.postcssrc.js... さまざまな .conf ファイル、さらにはさまざまな main、index、app ファイルがあり、なぜフロントエンドが構築されるのかについては文句を言いたくなります。このように開発されたプロジェクトには、12 個以上の設定ファイルがありますが、本当に必要ですか?当初、webpack3 を使えばすべてが簡単になるだろうと思っていましたが、そうではありませんでした。しかし、当分の間、それを変更する方法はないので、私たちができることは、原則をできるだけ理解し、簡素化するために最善を尽くすことです。最適化します🎜

上記は私が皆さんのためにまとめたものであり、今後皆さんのお役に立てれば幸いです。

関連記事:

jsのカスタムトリム関数を使って両端のスペースを削除

JavaScriptの動作原理

vueで全選択と選択を反転

jestを使ってテストする方法を詳しく解説ネイティブコンポーネントに反応します

データバインディングと取得を実現するためにvueですべてを選択します

mint-uiの時間プラグインを使用して選択値を取得します

VUE2は二次的な州と都市のリンケージ選択を実装します

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