webpack実践のDLPluginとDLReferencePluginの使用教程

DLPluginとDLReferencePlugnの使用
DLPluginとDLReferencePlugnは、ある方法でbundlesを分割し、構築の速度を大幅に向上させた。
1.まずbuildフォルダの追加----webpack.dll.co.nfig.js:

var path = require("path");
var webpack = require("webpack");
module.exports = {
 //          
 entry: {
  vendor: ['vue/dist/vue.esm.js','vue-router']
 },
 output: {
  path: path.join(__dirname, '../static/js'), //           
  filename: '[name].dll.js',// vendor.dll.js          。
  library: '[name]_library' //  webpack.DllPlugin  `name: '[name]_library',`    。
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library', 
   context: __dirname
  }),
 ]
};

2.package.jsonのscriptsリガで："dll": "webpack --config build/webpack.dll.config.js",3.npm run dllを実行してstatic/jsの下でベンダーdor-manifest.jsonを生成する；
 4.build/webpack.base.com nf.jsリガで：

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

5.そしてindex.でventdor.dll.jsを導入する：

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

ここで、設定後の:
 npm run build以降の時間は大幅に減少し、distパッケージの体積も前のものより小さいことが見られます。プロジェクトの最適化では、プロジェクトの構築速度を大幅に向上させ、プロジェクトの包装体積を減らすことができます。
締め括りをつける
以上は小编が皆さんに绍介したwebpack実践のDLPluginとDLReferencePlugnの使用教程です。皆さんのために役に立つことを望んでいます。