WebPACKのパッケージには遅すぎる？Dllpluginをお試しください

時々問題をパックに長い時間が発生したビルドパッケージ内のWebPACKは、なめらかな絹のようなパッケージングを可能にするソリューションが提供される〜

1.はじめに

WebPACKの時間とともにパッケージなど、いくつかやる頻繁に更新されていないサードパーティのライブラリ、 react、lodash、vue 我々は独自のコードから分離することを願っていますが、2つのオプションがWebPACKのコミュニティがあります

CommonsChunkPlugin
DLLPlugin

CommonsChunkPluginWebPACK、各パッケージには、実際にはまだこれらのサードパーティ製のライブラリ、ちょうど梱包が完了した後、できるサードパーティのライブラリと別に、当社独自のコードに対処する必要があります。そして、 DLLPlugin その後、サードパーティのコードを完全に分離することができる、つまり、それぞれが唯一、自分のコードをプロジェクトパック。コンセプトは、DLLのWindowsシステムから借用されたDLL、DLLパッケージが依存するライブラリの無実である、それは自分自身を実行することはできません、あなたのアプリケーションの参照を与えるために使用されます。

2. WebPACKの-単純なテンプレートの使用

使用するには DLLPlugin、追加の必要性は、新しいプロファイルを作成します。だから、パッケージの項目について、このように一般的に以下の2つの構成ファイルを持っています

webpack.config.js
webpack.dll.config.js

プロジェクトのルートディレクトリにファイルを作成webpack.dll.config.js

const path    = require('path');
const webpack = require('webpack'); module.exports = { entry: { vendor: ['vue-router','vuex','vue/dist/vue.common.js','vue/dist/vue.js','vue-loader/lib/component-normalizer.js','vue'] }, output: { path: path.resolve('./dist'), filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.DllPlugin({ path: path.resolve('./dist', '[name]-manifest.json'), name: '[name]_library' }) ] };

これは、ベンダにサードパーティ製のプラグインを追加するために使用されます。
そして、コードwebpack.config.jsを追加

plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dist/vendor-manifest.json')
    })
  ]

入口のhtmlファイルvendor.dll.jsで再導入
<script type="text/javascript" src="./../vendor.dll.js"></script>

そして、ショートカットコマンドpackage.jsonファイルを追加します（ビルド：DLL）

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "build:dll": "webpack --config webpack.dll.config.js" },

最終的なパッケージは、最初のNPMの実行ビルドを実行した場合：dllのコマンドは、パッケージのディレクトリに生成され vendor-manifest.json たファイルや vendor.dll.js ドキュメント。
DLL時間包装、WebPACKのは、すべてのライブラリを行いますパッケージマニフェストファイル、参照DLLコード（DLLのユーザー）で記述され、インデックスが含まれている、あなたはそれにマニフェストファイルを読み込むことができます。

次に行うnpm run build
のWebPACKはるかに高速の前に残って20秒で、およそ2,3秒の速度をパッキング今発見を。

3. WebPACKのテンプレートを使用します

ビルドでwebpack.dll.config.jsを作成

コンテンツ：

const path = require('path')
const webpack = require('webpack') module.exports = { entry: { vendor: [ 'vue-router', 'vuex', 'vue/dist/vue.common.js', 'vue/dist/vue.js', 'vue-loader/lib/component-normalizer.js', 'vue', 'axios', 'echarts' ] }, output: { path: path.resolve('./dist'), filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.DllPlugin({ path: path.resolve('./dist', '[name]-manifest.json'), name: '[name]_library' }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }

これは、コード圧縮プラグイン、またはDLLのパッケージを追加することは比較的大きくなるが示唆されました。

プラグインwebpack.prod.conf.jsの背後に配置された追加

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

index.htmlのルートディレクトリエントリの参照が追加します
<script type="text/javascript" src="./vendor.dll.js"></script>

スクリプトコマンドのpackage.jsonを高速に追加されました
"build:dll": "webpack --config build/webpack.dll.config.js"

ランタイムDLLを生成するために、npm run build:dlldistディレクトリの下に2つのファイルを生成し、 vender-manifest.json とします vender.dll.js。
その後、正式には、製品版生成 npm run build:prodに加えて生成され、webpack.dll.config.jsパッケージに指定されたパッケージ化されたファイル以外を。

試みに vue-element-admin 導入DllPluginを、20のパッケージ化項目、試験結果添加：
オリジナル包装時間：

DllPlugin後にパッケージ化された時間の導入：

私たちは、かなり〜パックする時間を短縮見ることができます

4.別の方法の外観スイッチ

あなたは時間を包装削減の目的を達成するためにキャッシュを使用しても見た目がパッケージの一部WebPACKのないようにしましょう使用して、CDN上の他の場所のjsファイルを導入し、CDNのダウンロードファイルすることができます。
外観の設定オプション：

// webpack.prod.config.js
// 多余代码省略
module.exports = {
    externals: {
        'vue': 'window.Vue', 'vuex': 'window.Vuex', 'vue-router': 'window.VueRouter' ... } } // 配置externals之后，webpack不会把配置项中的代码打包进去，别忘了需要在外部引入cdn上的js文件 // html <body> <script src="XXX/cdn/vue.min.js"></script> ...... </body>