vue-cli で webpack2 プロジェクトのパッケージ化最適化を実装する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

vue-cli で webpack2 プロジェクトのパッケージ化最適化を実装する方法

亚连

Jun 07, 2018 pm 02:15 PM

vue-cli 最適化パック

ここで、vue-cli webpack2 プロジェクトのパッケージ化の最適化に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

ファイルの検索範囲を減らす

resolve.modulesを設定する

Webpackのresolve.modulesは、jsにインポート「vue」が表示される場合、これは相対的なものではありません。または、絶対パスが記述されていない場合は、node_modules ディレクトリにあります。ただし、デフォルトの設定は上向きの再帰検索によって見つかりますが、通常、プロジェクトディレクトリには node_modules が 1 つだけあり、それはプロジェクトのルートディレクトリにあります。検索範囲を減らすために、そのフルパスを直接指定できます。同様に、エイリアスの場合も同様です (同じことが `alias の設定にも当てはまります):

function resolve (dir) {
 return path.join(__dirname, &#39;..&#39;, dir)
}
module.exports = {
 resolve: {
 extensions: [&#39;.js&#39;, &#39;.vue&#39;, &#39;.json&#39;],
 modules: [
  resolve(&#39;src&#39;),
  resolve(&#39;node_modules&#39;)
 ],
 alias: {
  &#39;vue$&#39;: &#39;vue/dist/vue.common.js&#39;,
  &#39;src&#39;: resolve(&#39;src&#39;),
  &#39;assets&#39;: resolve(&#39;src/assets&#39;),
  &#39;components&#39;: resolve(&#39;src/components&#39;),
  // ...
  &#39;store&#39;: resolve(&#39;src/store&#39;)
 }
 },
 ...
}

ログイン後にコピー

テストと包含と除外を適切に設定します

テスト: 満たさなければならない条件 (正規表現、引用符を追加しない、一致する)

exclude: 条件を満たしていない (処理対象外のディレクトリを除く)

include: インポートされたファイルがローダーによって変換されるパスまたはファイル配列 (処理対象のディレクトリを含む)

これ不必要なトラバーサルを削減できるため、パフォーマンスの損失が軽減されます。

コード圧縮ツールを置き換えます

Webpack によってデフォルトで提供される UglifyJS プラグインは、シングルスレッド圧縮のため低速です

webpack-Parallel-uglify-plugin プラグインは、UglifyJS プラグインを実行できます。並行して、CPU リソースをより完全かつ合理的に使用することで、ビルド時間を大幅に短縮できます

もちろん、このプラグインは開発環境ではなく運用環境で使用する必要があります。次の設定:

// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
//  warnings: false,
//  drop_console: true
// },
// sourceMap: true
// }),
// 增加 webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin = require(&#39;webpack-parallel-uglify-plugin&#39;);
new ParallelUglifyPlugin({
 cacheDir: &#39;.cache/&#39;, // 设置缓存路径，不改动的调用缓存，第二次及后面build时提速
 uglifyJS:{
 output: {
  comments: false
 },
 compress: {
  warnings: false
 }
 }
})

ログイン後にコピー

同じタイプのプラグイン webpack-uglify-Parallel も試しましたが、機能しませんでした。 webpack-Parallel-uglify-plugin ほど効果的ではありません (プロジェクトによって異なる場合があります。プロジェクト内での比較に使用できます)。

webpack-Parallel-uglify-plugin プラグインは、UglifyJsPlugin によって生成されたパッケージよりもわずかに大きいですが (ただし、明らかではありません)、サイズの増加と比較して、速度を追求することにしました (使用後は 40 秒から 40 秒に短縮されました)。 19秒）。

静的ファイルをコピーします

copy-webpack-plugin プラグインを使用します: 指定されたフォルダー内のファイルを指定されたディレクトリにコピーします。その構成は次のとおりです:

var CopyWebpackPlugin = require(&#39;copy-webpack-plugin&#39;)
plugins: [
 ...
 // copy custom static assets
 new CopyWebpackPlugin([
 {
  from: path.resolve(__dirname, &#39;../static&#39;),
  to: config.build.assetsSubDirectory,
  ignore: [&#39;.*&#39;]
 }
 ])
]
DllPlugin & DllReferencePlugin

ログイン後にコピー

Dll の概念は、 Windows システムの dll。 dll パッケージは純粋に依存するライブラリであり、それ自体では実行できず、アプリ内で参照するために使用されます。

DLL をパッケージ化するとき、Webpack は含まれるすべてのライブラリのインデックスを作成し、DLL (DLL ユーザー) を参照するコードをパッケージ化するときに、このマニフェストファイルを読み取るだけで済みます。

1. 次の内容を含むファイル webpack.dll.conf.js をプロジェクトビルドフォルダーに追加します

var path = require(&#39;path&#39;)
var webpack = require(&#39;webpack&#39;)
module.exports = {
 entry: {
 vendor: [ // 这里填写需要的依赖库
  &#39;babel-polyfill&#39;,
  &#39;axios&#39;,
  &#39;vue/dist/vue.common.js&#39;,
  &#39;vue-router&#39;,
  &#39;pingpp-js&#39;,
  "region-picker"
 ]
 },
 output: {
 path: path.resolve(__dirname, &#39;../static/js&#39;),
 filename: &#39;[name].dll.js&#39;,
 library: &#39;[name]_library&#39;
 },
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: &#39;vue-loader&#39;
  },
  {
  test: /\.js$/,
  loader: &#39;babel-loader&#39;,
  exclude: /node_modules/
  }
 ]
 },
 plugins: [
 new webpack.optimize.ModuleConcatenationPlugin(),
 new webpack.DllPlugin({
  path: path.join(__dirname, &#39;.&#39;, &#39;[name]-manifest.json&#39;),
  libraryTarget: &#39;commonjs2&#39;,
  name: &#39;[name]_library&#39;
 }),
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false
  }
 })
 ]
}

ログイン後にコピー

2. プラグイン部分を webpack.prod.conf.js ファイルに追加します。

plugins: [
 ...
 // copy custom static assets
  new webpack.DllReferencePlugin({
    context: path.resolve(__dirname, &#39;..&#39;),
    manifest: require(&#39;./vendor-manifest.json&#39;)
  })
]

ログイン後にコピー

e33。プロジェクトルートディレクトリindex.htmlファイルを追加する：

<body>
  <p id="app"></p>
  <!-- built files will be auto injected -->
  <script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script>   //添加这句，路径可根据所需修改
</body>

ログイン後にコピー

4。package.jsonでパッケージdllにコマンドを追加する

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

ログイン後にコピー

5。コマンドシーケンス

npm run build:dll //打包一次之后依赖库无变动不需要执行
npm run build

ログイン後にコピー

利点

Dllは、パッケージ化された後も独立して存在し、含まれるライブラリが増加、減少、またはアップグレードされない限り、ハッシュは変更されないため、オンラインDLLコードを変更する必要はありません。バージョンリリースとともに頻繁に更新されます。アプリパーツのコードを変更した後は、含まれるライブラリが増加、減少、またはアップグレードされない限り、アプリパーツのコードと DLL パーツをコンパイルするだけで済み、再パッケージする必要はありません。これにより、各コンパイルの速度も大幅に向上します。

同じ依存ライブラリを使用する複数のプロジェクトがあると仮定すると、それらは 1 つの DLL を共有できます。

19s->15s

babelのcacheDirectoryをtrueに設定します

webpack.base.conf.jsのbabel-loaderを変更します:

loader: &#39;babel-loader?cacheDirectory=true&#39;,

ログイン後にコピー

15s->14s
Set noParse

もしあなたならモジュールに他の新しい依存関係がないことを確認するには、これを設定できます。これにより、Webpack はこのファイルの依存関係をスキャンしなくなります。これにより、より大きなクラスライブラリのパフォーマンスが向上します。詳細については、次の設定を参照してください。以上、皆様に向けてまとめさせていただきましたので、今後皆様のお役に立てれば幸いです。関連記事:

Vue2.0でユーザー権限制御を実装する

vue.jsを介してWeChat決済を実装する
vuexの実装方法を説明する(詳細なチュートリアル)
以上がvue-cli で webpack2 プロジェクトのパッケージ化最適化を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25：Myriseのすべてのロックを解除する方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7488

15

CakePHP チュートリアル

1377

52

Steamのアカウント名の形式は何ですか

77

11

Win11 Activation Key Permanent

52

19

NYTの接続はヒントと回答です

19

40

もっと見る

Related knowledge

詳細な解釈: なぜ Laravel はカタツムリのように遅いのでしょうか? Mar 07, 2024 am 09:54 AM
Laravel は人気のある PHP 開発フレームワークですが、カタツムリのように遅いと批判されることがあります。 Laravel の速度が満足できない原因は一体何でしょうか?この記事では、Laravel がカタツムリのように遅い理由をさまざまな側面から詳細に説明し、読者がこの問題をより深く理解できるように、具体的なコード例と組み合わせて説明します。 1. ORM クエリのパフォーマンスの問題 Laravel では、ORM (オブジェクトリレーショナルマッピング) は非常に強力な機能です。

新しい Win11 コンピューターを受け取った後に設定を最適化し、パフォーマンスを向上させるにはどうすればよいですか? Mar 03, 2024 pm 09:01 PM
新しいコンピュータを受け取った後、パフォーマンスをセットアップして最適化するにはどうすればよいですか? ユーザーは、[プライバシーとセキュリティ] を直接開き、[全般] (広告 ID、ローカルコンテンツ、アプリケーションの起動、推奨事項の設定、生産性向上ツール) をクリックするか、ローカルグループポリシーを直接開くことができます。新しい Win11 パソコンを受け取った後に、設定を最適化し、パフォーマンスを向上させる方法について詳しくご紹介します。新しい Win11 パソコンを受け取った後に、設定を最適化し、パフォーマンスを向上させる方法について詳しくご紹介します。 1 つ: 1. [Win+i] ボタンを押します。 ] キーの組み合わせを押して設定を開き、左側の [プライバシーとセキュリティ] をクリックし、[右側のツールの Windows アクセス許可の下の一般 (広告 ID、ローカルコンテンツ、アプリの起動、設定の提案、生産性)] をクリックします。方法 2

Golang の GC 最適化戦略に関するディスカッション Mar 06, 2024 pm 02:39 PM
Golang のガベージコレクション (GC) は、開発者の間で常に話題になっています。高速プログラミング言語として、Golang の組み込みガベージコレクターはメモリを適切に管理できますが、プログラムのサイズが大きくなるにつれて、パフォーマンスの問題が発生することがあります。この記事では、Golang の GC 最適化戦略を検討し、いくつかの具体的なコード例を示します。 Golang のガベージコレクション Golang のガベージコレクターは同時マークスイープ (concurrentmark-s) に基づいています。

C++ プログラムの最適化: 時間の複雑さを軽減する手法 Jun 01, 2024 am 11:19 AM
時間計算量は、入力のサイズに対するアルゴリズムの実行時間を測定します。 C++ プログラムの時間の複雑さを軽減するためのヒントには、適切なコンテナー (ベクター、リストなど) を選択して、データのストレージと管理を最適化することが含まれます。クイックソートなどの効率的なアルゴリズムを利用して計算時間を短縮します。複数の操作を排除して二重カウントを削減します。条件分岐を使用して、不必要な計算を回避します。二分探索などのより高速なアルゴリズムを使用して線形探索を最適化します。

VSCodeの機能を詳しく解説：業務効率化にどう役立つのか？ Mar 25, 2024 pm 05:27 PM
VSCodeの機能を詳しく解説：業務効率化にどう役立つのか？ソフトウェア開発業界の継続的な発展に伴い、開発者の作業効率とコードの品質の追求は、仕事における重要な目標となっています。このプロセスでは、コードエディターの選択が重要な決定になります。数あるエディターの中でも、Visual Studio Code (略して VSCode) は、その強力な機能と柔軟な拡張性により、大多数の開発者に愛されています。この記事では、VSCode のいくつかの機能を詳しく紹介し、説明します。

Laravelのパフォーマンスボトルネックを解読：最適化テクニックを完全公開！ Mar 06, 2024 pm 02:33 PM
Laravelのパフォーマンスボトルネックを解読：最適化テクニックを完全公開！ Laravel は人気のある PHP フレームワークとして、開発者に豊富な機能と便利な開発エクスペリエンスを提供します。ただし、プロジェクトのサイズが大きくなり、訪問数が増加すると、パフォーマンスのボトルネックという課題に直面する可能性があります。この記事では、開発者が潜在的なパフォーマンスの問題を発見して解決できるように、Laravel のパフォーマンス最適化テクニックについて詳しく説明します。 1. Eloquent の遅延読み込みを使用したデータベースクエリの最適化 Eloquent を使用してデータベースにクエリを実行する場合は、次のことを避けてください。

Laravel パフォーマンスのボトルネックが明らかに: 最適化ソリューションが明らかに! Mar 07, 2024 pm 01:30 PM
Laravel パフォーマンスのボトルネックが明らかに: 最適化ソリューションが明らかに!インターネット技術の発展に伴い、Web サイトやアプリケーションのパフォーマンスの最適化がますます重要になってきています。人気の PHP フレームワークである Laravel は、開発プロセス中にパフォーマンスのボトルネックに直面する可能性があります。この記事では、Laravel アプリケーションが遭遇する可能性のあるパフォーマンスの問題を調査し、開発者がこれらの問題をより適切に解決できるように、いくつかの最適化ソリューションと具体的なコード例を提供します。 1. データベースクエリの最適化データベースクエリは、Web アプリケーションにおける一般的なパフォーマンスのボトルネックの 1 つです。存在する

 WIN7システムのスタートアップ項目を最適化する方法 Mar 26, 2024 pm 06:20 PM
1. デスクトップでキーの組み合わせ (win キー + R) を押してファイル名を指定して実行ウィンドウを開き、[regedit] と入力して Enter キーを押して確定します。 2. レジストリエディターを開いた後、[HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer] をクリックして展開し、ディレクトリに Serialize 項目があるかどうかを確認します。ない場合は、エクスプローラーを右クリックして新しい項目を作成し、Serialize という名前を付けます。 3. 次に、「シリアル化」をクリックし、右側のペインの空白スペースを右クリックして、新しい DWORD (32) ビット値を作成し、「Star」という名前を付けます。

See all articles