webpack进阶（二）：动态链接库（抽离react）

再前面的文章中，我们知道了可以用webpack的externals属性可以将通过cdn形式引入的第三方库，从而来减少打包代码的体积。那么反过来，我们能否把工程依赖中的第三方库单独抽离出来，也应用cdn的方式来引入，从而减少我们的代码体积呢，这里有一个最为典型的例子，我们可以抽离react吗？我们不妨来尝试一下。
我们首先需要一个可以运行react的简单的环境：
package.json:

{
  "name": "webpack-study",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development',
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-react','@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            output:'index.html'
        })
    ]
};

然后我们来打包看看：

我们看到这个时候的打包结果bundle.js足足有1M以上的体积。
接下来我们就来尝试一下，能否把react单独抽离出来，从而不用每次都打包react，这里就用到了webpack中非常重要的一个概念，动态链接库（Dynamic Link Library 或者 Dynamic-link Library，缩写为 DLL）。
我们来新建一个webpack的配置文件，这里我们就叫webpack.config.dll.js，这里我们还会用到webpack自带的插件dllPlugin:

const path = require('path');
const webpack = require('webpack');
module.exports = {
    mode:'development',
    entry:{
        react:['react','react-dom']
    },
    output:{
        filename:'_dll_[name].js',
        path:path.resolve(__dirname,'dist'),
        library:'_dll_[name]' // 给打包后的结果赋到一个值上
    },
    plugins:[
        new webpack.DllPlugin({
            name: '_dll_[name]', // name == library,二者要同名，不然找不到对应关系
            path:path.resolve(__dirname,'dist','dll.json')
        })
    ]
};

然后我们来打包一下，npx webpack --config webpack.config.dll.js，可以看到dist下生成了两个文件：一个是_dll_react.js，就是我们打包好的js，另一个是dll.json，我们称之为是清单文件，我们可以看一下这个清单文件：

{
    "name": "_dll_react",
    "content": {
        "./node_modules/react-dom/index.js": {
            "id": "./node_modules/react-dom/index.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/react/cjs/react.development.js": {
            "id": "./node_modules/react/cjs/react.development.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/object-assign/index.js": {
            "id": "./node_modules/object-assign/index.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/prop-types/checkPropTypes.js": {
            "id": "./node_modules/prop-types/checkPropTypes.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/prop-types/lib/ReactPropTypesSecret.js": {
            "id": "./node_modules/prop-types/lib/ReactPropTypesSecret.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/react/index.js": {
            "id": "./node_modules/react/index.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/react-dom/cjs/react-dom.development.js": {
            "id": "./node_modules/react-dom/cjs/react-dom.development.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/scheduler/index.js": {
            "id": "./node_modules/scheduler/index.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/scheduler/cjs/scheduler.development.js": {
            "id": "./node_modules/scheduler/cjs/scheduler.development.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/scheduler/tracing.js": {
            "id": "./node_modules/scheduler/tracing.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "./node_modules/scheduler/cjs/scheduler-tracing.development.js": {
            "id": "./node_modules/scheduler/cjs/scheduler-tracing.development.js",
            "buildMeta": {
                "providedExports": true
            }
        }
    }
}

他对应的其实就是每个react下的名称在webpack打包好之后的位置，通过这id，我们可以直接获取到内容。
接下来，我们就可以直接来使用这个打包好的结果了，首先我们在模版html中直接引入_dll_react.js:，然后在原来的webpack配置中加上dllPlugin对应的DllReferencePlugin插件，如下：

···
        new webpack.DllReferencePlugin({
            manifest:path.resolve(__dirname,'dist','dll.json') // 清单位置，清单找不到的才需要真正去打包
        })
···

然后我们再来打包一下我们的工程，我们惊喜的发现，我们的项目只剩下6K多：

这样我们的动态链接库，就配置完成了。