vue-cli に最適化された Webpack 構成の詳細な例

最近のプロジェクトは忙しいインフラ構築期間を過ぎ、少しずつリラックスしてきました。過去を振り返り、新しいことを学ぶ効果を期待して、最近の Webpack 最適化対策を記録します。この記事では主に vue-cli 最適化に基づいた webpack 設定の詳細な説明を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

プロジェクトはvueファミリーバケットを使用しており、ビルド構成はvue-cliに基づいて改良されています。元の Webpack 構成については、vue-cli#2.0 Webpack 構成分析の記事を参照してください。この記事では、基本的にファイル内のコードの各行が詳細に説明されており、Webpack をより深く理解するのに役立ちます。

注意深く要約すると、私の最適化は基本的にインターネット上で流通しているポイントに基づいています

1. 外部設定を通じて共通ライブラリを抽出し、cdnを参照します

2. CommonsChunkPluginを適切に設定します

3. エイリアスを上手に活用しましょう

4. dllplugin によりプリコンパイルが可能になります

5. happypack マルチコア ビルド プロジェクト

externals

ドキュメント アドレス https://doc.webpack-china.org/configuration/externals/

特定のインポートされたパッケージを防止します ( package) はバンドルにパッケージ化されますが、これらの外部依存関係は実行時 (ランタイム) に外部から取得されます。

CommonsChunkPlugin

ドキュメントアドレス https://doc.webpack-china.org/plugins/commons-chunk-plugin/

CommonsChunkPlugin プラグインは、スタンドアロン ファイル (別名) を作成するためのオプションのプラグインです。 as chunk) 関数の場合、このファイルには複数のエントリ チャンクの共通モジュールが含まれます。共通モジュールを分離することで、最終的に合成されたファイルを最初に 1 回ロードし、その後の使用のためにキャッシュに保存できます。これにより、ブラウザーは新しいページにアクセスするたびに大きなファイルをロードするのではなく、キャッシュから共通コードを迅速に取得するため、速度が向上します。

resolve.alias

ドキュメントアドレス https://doc.webpack-china.org/configuration/resolve/#resolve-alias

モジュールの導入が容易になるように import または require のエイリアスを作成します。たとえば、src/ フォルダーにあるいくつかの一般的なモジュールは次のとおりです。

ただし、私自身の実践を通じて、最後の 3 つのポイントが私自身のプロジェクトに最も最適化されています。この記事では、主に次の点について詳しく説明しています

プロジェクトのパッケージ化に必要な時間は基本的に約 40 秒であることがわかり、次の 3 つの最適化ステップを実行するのにどのくらい時間がかかりますか

1.プリコンパイルして参照するための dllplugin

そもそもなぜ Dll を参照するのでしょうか?インターネット上の記事をいくつか閲覧したところ、webpack の dll を使用すると、ビルドの高速化に加えて、別の利点があることがわかりました。

Dll はパッケージ化された後も独立して存在し、それに含まれるライブラリが増加、減少、またはアップグレードされない限り、ハッシュは変化しないため、オンライン DLL コードはバージョンのリリースごとに頻繁に更新する必要はありません。 Dll を使用してパッケージ化されたファイルは、基本的に独立したライブラリ ファイルであるため、あまり変更されないのが特徴です。通常、これらのライブラリ ファイルを app.js にパッケージ化すると、他のビジネス ファイルの変更がビルドのキャッシュの最適化に影響を与えるため、毎回 npm パッケージ内の関連ファイルを再度検索する必要があります。 DLL を使用した後、含まれるライブラリがアップグレード、追加、または削除されない限り、再パッケージ化する必要はありません。これにより、ビルド速度も向上します。

それでは、Dll を使用してプロジェクトを最適化する方法を説明します

まず、DLL 構成ファイルを作成し、プロジェクトに必要なサードパーティ ライブラリを導入します。このタイプのライブラリの特徴は、バージョンのリリースに応じて頻繁に更新する必要がなく、長期的に安定していることです。

const webpack = require('webpack');
const path = require('path');

module.exports = {
 entry: {
  //你需要引入的第三方库文件
  vendor: ['vue','vuex','vue-router','element-ui','axios','echarts/lib/echarts','echarts/lib/chart/bar','echarts/lib/chart/line','echarts/lib/chart/pie',
   'echarts/lib/component/tooltip','echarts/lib/component/title','echarts/lib/component/legend','echarts/lib/component/dataZoom','echarts/lib/component/toolbox'],
 },

 output: {
  path: path.join(__dirname, 'dist-[hash]'),
  filename: '[name].js',
  library: '[name]',
 },

 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, 'dll', '[name]-manifest.json'),
   filename: '[name].js',
   name: '[name]',
  }),
 ]
};

基本的な設定パラメータは基本的に webpack と同じです。最適化を見た人なら誰でもその意味を理解できると思いますので、説明は省略します。次に、コードを実行してファイルをコンパイルします。 (私の構成ファイルはビルドに配置されており、以下のパスはプロジェクトのパスに応じて変更する必要があります)

webpack -p --progress --config build/webpack.dll.config.js

実行が完了すると、ディレクトリの同じレベルに 2 つの新しいファイルが生成されます。 1 つは dist フォルダーの verdor.js に生成され、エントリの依存関係の圧縮コードが含まれます。もう 1 つは dll フォルダー内の verdor-manifest.json で、番号で各ライブラリにインデックスを付け、名前の代わりに ID を使用します。

次に、webpack 設定ファイルのプラグインにコード行を追加するだけです。

const manifest = require('./dll/vendor-manifest.json');
...
...,
plugin:[
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest,
  }),
]

この時点で webpack コマンドを実行すると、時間が 40 秒から 20 秒程度に激減していることがわかります (依存しているからなのかはわかりませんが)。ライブラリが多すぎるため、手動で顔を覆ってください。

2. Happypackのマルチスレッドコンパイル

一般的にnode.jsはシングルスレッドでコンパイルを行いますが、happypackはノードの構築をマルチスレッドで開始するため、構築速度が大幅に向上します。使用方法も比較的簡単です。私のプロジェクトを例として、プラグイン内に新しい happypack プロセスを作成し、ローダーが使用される場所を対応する ID に置き換えます

var HappyPack = require('happypack');
...
...
modules:{
  rules : [
    ...
    {
      test: /\.js$/,
      loader:[ 'happypack/loader?id=happybabel'],
      include: [resolve('src')]
    },
    ...
  ]
},
...
...
plugin:[
  //happypack对对 url-loader,vue-loader 和 file-loader 支持度有限，会有报错，有坑。。。
  new HappyPack({
     id: 'happybabel',
     loaders: ['babel-loader'],
     threads: 4,//HappyPack 使用多少子进程来进行编译
  }),
  new HappyPack({
     id: 'scss',
     threads: 4,
     loaders: [
        'style-loader',
        'css-loader',
        'sass-loader',
     ],
  })
]

这时候再去执行编译webpack的代码，打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大，不知道是不是因为本身js比重占据太大的缘故)。

3.善用alias

3.配合resolve，善用alias

本来是没有第三点的，只不过在搜索网上webpack优化相关文章的时候，看到用人提到把引入文件改成库提供的文件(原理我理解其实就是1.先通过resolve指定文件寻找位置，减小搜索范围；2.直接根据alias找到库提供的文件位置)。

vue-cli配置文件中提示也有提到这一点，就是下面这段代码

resolve: {
  //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
  extensions: ['.js', '.vue', '.json'],
  //模块别名定义，方便后续直接引用别名，无须多写长长的地址
  alias: {
   'vue$': 'vue/dist/vue.esm.js',//就是这行代码，提供你直接引用文件
   '@': resolve('src'),
  }
 },

然后我将其他所有地方关于vue的引用都替换成了vue$之后，比如

// import 'vue';
import 'vue/dist/vue.esm.js';

时间竟然到了12s，也是把我吓了一跳。。。

然后我就把jquery，axios，vuex等等全部给替换掉了。。。大概优化到了9s左右，美滋滋，O(∩_∩)O~~

4.webpack3升级

本来是没第四点，刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点，比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件

// 2017-08-13配合最新升级的webpack3提供的新功能，可以使压缩的代码更小，运行更快
...
plugin : [
  new webpack.optimize.ModuleConcatenationPlugin(),
]

不过在添加这行代码之后，构建时间并没有太大变化，不过运行效率没试过，不知道新的效果怎么样

好了基本上感觉就是以上这些效果对项目的优化最大，虽然没有到网上说的那种只要3~4秒时间那么变态，不过感觉基本8,9秒的时间也可以了。

相关推荐：

图文解析如何使用vue-cli脚手架

实例详解vue-cli vscode 配置 eslint

如何使用 vue-cli 开发多页应用方法

以上がvue-cli に最適化された Webpack 構成の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。