Webpack dllPluginサードパーティ共通ブロックを抽出

単一ページアプリケーションプロジェクトでは、jQuery、React、antd、momentなど、多くのサードパーティモジュールを参照します.パッケージ化すると、webpackはデフォルトでこれらのモジュールを再パッケージし、パッケージ化時間が非常に長くなります.パッケージ化の時間を最小限に抑えるために、これらのサードパーティ製ライブラリをまずダイナミックライブラリにパッケージ化したほうがいいです.次回のパッケージ化時にこれらのライブラリを再パッケージする必要はなく、インタフェースを直接参照します.以下、例として説明する.私たちがしなければならないのは2つです.1、これらのライブラリをdllパッケージにパッケージ化する2、dllパッケージを参照し、ビジネスコードをパッケージ化する
もし私たちがこれらのライブラリをパッケージ化するなら.

  "dependencies": {
    "antd": "^3.19.6",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "vue": "^2.6.10"
  }

まずdll.config.jsファイルを新規作成します.主な内容は

   entry: {
       "lib": vendors, //      vendors = ['antd','jquery','moment'...]
   },
   output: {
       path: path.resolve(process.cwd(), 'lib'), //      js    
       filename: '[name].js',       //    name lib
       library: '[name]', //    lib.js     var lib=function(n){v...
   },
   plugins: [
       new webpack.DllPlugin({
           path: path.resolve(__dirname,'manifest.json'), //   manifest.json  
           name: '[name]',
       }),
   ]

webpack --config dll.config.jsを実行すると、動的リンクライブラリを作成する手順1が完了します.
ステップ2:ビジネスコードをパッケージ化しdllを参照する.config.js htmlテンプレートにjsを導入しました

そしてwebpackでconfig.jsに の を き む

plugins:[
      new CleanWebpackPlugin(), //       
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: path.join(__dirname,'manifest.json')
    }),
    new copyWebpackPlugin([ //         ，               
      {
        from:'./lib',
        to:'lib'
      }
    ])
]

ビジネスロジックjsには、 した のサードパーティモジュールが される.

import jquery from 'jquery'
import moment from 'moment'
import vue from 'vue'
import antd from 'antd'
import react from 'react'
import reactDom from 'react-dom'

Webpack--config Webpackを します.config.jsでいいです. したindexを する.jsでは、コードが に さい.5 kくらいしかありません. するlib.jsはとても きくて2.5 Mくらいあります. に たちの を しました.
する 1、なぜ するLib.Jsはこんなに きくて、2.5 Mあります.dllを わなければ、コードはすべてindexにパッケージされます.jsでは538 Kしかありません. してみると していました.でも は きすぎます.2、サードパーティモジュールが たに された 、lib.jsは する があります.しかし、 は の はできません.