Webpack-DellPlugin最適化パッケージ性能(vue-cliベース)

1.紹介
Dllという概念はWindowsシステムのdllを参考にしているはずです.dllパッケージは、純粋な依存ライブラリであり、それ自体は実行できません.appへの参照に使用されます.
dllをパッケージングするとき、Webpackはすべての含まれているライブラリをインデックスにしてmanifestファイルに書きますが、dllを参照するコード(dll user)はパッケージングするときに、このmanifestファイルを読み込むだけでいいです.
簡単に言えば
静的リソースファイル(実行依存パッケージ)とソースファイルを別々にパッケージ化し、DllPluginを使用して静的リソースをパッケージ化し、DllReferencePluginを使用してソースファイルにリソースファイルを参照させます.
2.プリパッケージ依存モジュール
ルートディレクトリにwebpackを作成します.dll.config.jsのプロファイル

var path = require("path");
var webpack = require("webpack");

module.exports = {
  //            
  entry: {
    vendor: ['vue', 'lodash', 'vuex', 'axios', 'vue-router', 'element-ui']
  },
  output: {
    path: path.join(__dirname, './static/js'), //           
    filename: '[name].dll.js',
    library: '[name]_library' 
    // vendor.dll.js          。
    //     DllPlugin  name  ，
    //       webpack.DllPlugin  `name: '[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
      }
    })
  ]
};

ポイント:ここで導入するDllpluginプラグインはmanifestを生成する.jsonファイル、webpack用です.config.jsに組み込まれたDllReferencePluginは、作成したソースファイルが必要な静的リソース(実行時依存パッケージ)に正しくアクセスできるようにします.

path:manifest.jsonが生成したフォルダと名前で、ルートディレクトリの下に生成されます.

name:およびoutput.libraryは一致していればいいです.

context:オプション、manifestファイルで要求されたコンテキスト、デフォルトはこのwebpackファイルコンテキストです.(!!!!私はこのプラグインを勉強している間にずっと成功したピットの一つがありません!!!このコンテキストはwebpack.config.jsのDllReferencePluginプラグインのcontextが指すコンテキストと一致しなければなりません!!)

編集が終わったらリソースファイルをプリパッケージできます

##    webpack    webpack  
webpack --config ./webpack.dll.config.js

この文をpackageに追加することもできます.jsonの中

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

パッケージが完了するとstaticファイルの下にjsファイルがあり、その中にvendorがあります.dll.jsは、それ以外にルートディレクトリの下にvendor-manifestも生成する.json.使用するパッケージをソースファイルと一緒にパッケージ化する必要はありませんが、ソースファイルのwebpackでDllReferencePluginがvendor-manifestを使用するように構成する必要があります.jsonはこのdllを参照します.
3.ソースファイルのパッケージング
このステップではvue-cliを書き換えるだけで良いwebpackを生成します.config.js:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    // ...（     ，      module    ）
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    })
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

このファイルには主にplugins構成が追加されています.

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

context:Dllpluginのcontextが指すコンテキストと一致し、ここではルートディレクトリを指します.manifest:Dllpluginを導入して生成したmanifest
最後に
ルートディレクトリのindexを手動で必要とします.htmlに生成されたdllライブラリを導入します.

ここも っていて、 が に した の つでもあります!! が に ろに いたので、ずっと っていました. はここは し を かせばわかります. たちはmainにいます.jsに された パッケージ、main.jsは にbuildにパッケージされた.js、buildを しく するには、まずバッグを き まなければなりません.jsよ!だからvendor.dll.jsはbuildに かなければならない.jsの に します.
もう つ があります
Webpackでconfig.js:

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },

これはmainを します.jsのimport Vue from"vue"は は する"vue/dist/vueである.esm.js',webpack.dll.config.jsはvueが「vue/dist/vue」を すことを らない.esm.js'、だからwebpackを する があります.dll.config.js :

  vendor: ['vue', 'lodash', 'vuex', 'axios', 'vue-router', 'element-ui']
  },

  entry: {
    vendor: ['vue/dist/vue.esm.js', 'lodash', 'vuex', 'axios', 'vue-router', 'element-ui']
  },

Webpackを したのでdll.config.jsですので、 パッケージする があります.

##     dll
npm run dll
##        
npm run build

ここまで は わりますが、オンラインになるたびにフォルダを し、indexを する があります.htmlコピーして り け、distディレクトリを り け、staticを り けてオンラインにするのは ではありません.
4.フォルダ を
まず、いくつかのプラグインをインストールします.

npm install html-webpack-plugin copy-webpack-plugin clean-webpack-plugin --save-dev

Webpackを しますconfig.js :

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    contentBase: path.join(__dirname, 'dist')
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    }),
    new HtmlWebpackPlugin({
      inject: true,
      template: './index.html',
      filename: 'index.html'
    }),
    new CopyWebpackPlugin([
      { from: 'static', to: 'static' }
    ]),
    new CleanWebpackPlugin(['dist'])
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

い1:

 output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.[hash].js'
  },

hash を ブラウザキャッシュ

をクリア

publicPath:'/':indexのため.htmlはdistディレクトリにパッケージする があるため、build.[hash].js’の パスは/dist/から/

に される
い2:
にpluginsに3つのプラグインが されました(ifに してはいけません.そうしないと がエラーになります):

new HtmlWebpackPlugin({
  inject: true,
  template: './index.html'
}),
new CopyWebpackPlugin([
  {from: 'static', to:'static'}
]),
new CleanWebpackPlugin(['dist'])

html-webpack-plugin:index.htmlはdistディレクトリに するのでhtml-webpack-pluginを し、デフォルトで されるindex.htmlはindexのためoutputのフォルダの にパッケージされます.htmlはパッケージ dllを する があり、vueはルートコンポーネントdiv#appにマウントする があるため、ルートディレクトリ indexのテンプレートを する がある.html:

inject:true:パッケージされたjsファイルをhtmlのbodyの に し、scriptのロード を します.

copy-webpack-plugin:static/js/のdllを し、distファイルの にあるため、パッケージされた フォルダをパッケージディレクトリdistにコピーします.

clean-webpack-plugin:パッケージ にdistディレクトリ

をクリア
い3:

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    contentBase: path.join(__dirname, 'dist')
  },

contentBase: path.join(_dirname,‘dist’)は、dev でindexを するためである.htmlのディレクトリはdistに され、 のアクセスファイルパスと します.
に
npm run devは しく でき、npm run buildはdistディレクトリを でパッケージ してオンラインにすることができます.!!!