create-react-app使用dllplugin抽取antd作爲公共模塊

首先說說，爲什麼要使用dllplugin？
在項目開發中，我們會遇到很多的依賴，體積不小，而且他們都是公共模塊，基本上不會有變動，所以考慮是不是可以把這部分公共的模塊抽取出來，作爲靜態的資源，不需要每次都打包這塊
雖然有CommonsChunkPlugin插件可以抽取公共模塊，但是有如下缺點

1. 每次打包都會重新構建公共模塊
2. 只要其中的模塊有微笑的變動，打包出來的公共文件就不一樣，簡單說，換臺機器，同樣是vendor.js，但是文件的內容是不一樣的，每次發佈，會增加cdn服務器的壓力

於是dllplugin橫空出世，它可以抽取你想要分離的公共模塊生成一個js文件，然後在以後的開發和打包的過程中，都可以直接用預先編譯好的js文件，也就是說，公共的依賴，不會每次都打包

使用如下

1. 在創建文件config/webpack.config.dll,內容如下

   const path = require('path')
   const webpack = require('webpack')
   const paths = require('./paths')
   const getClientEnvironment = require('./env')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   const publicPath = paths.servedPath
   const publicUrl = publicPath.slice(0, -1)
   const env = getClientEnvironment(publicUrl)
   
   module.exports = {
     entry: {
       vendor: [
         'antd'
       ]
     },
     output: {
       path: paths.appPublic,
       filename: 'static/js/[name].js',
       library: '[name]_library', // same with webpack.DllPlugin name option
       publicPath: publicPath
     },
     plugins: [
       new webpack.DllPlugin({
         path: path.resolve(paths.appPublic, 'static/js/[name]-manifest.json'),
         name: '[name]_library',
         context: paths.appPublic
       }),
     ]
   }
   
   

2. 添加下面內容到webpack的plugins中

   new webpack.DllReferencePlugin({
     context: paths.appPublic,
     manifest: require(path.resolve(paths.appPublic, 'static/js/vendor-manifest.json'))
   }),
   

3. 接下來就可以愉快的玩耍了，在開發和打包的過程中，在遇到antd組件的時候，都不會從nodemodule中取，而是直接從vendor.js裏面取，構建速度從20s降低到11秒，提升不小，還可以配置其他，進一步提升