进一步分包：预编译资源模块使用 DLLPlugin 进行分包

分包：设置 Externals

思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中
方法：使用 html-webpack-externals-plugin

//在配置文件中添加HtmlWebpackExternalsPlugin插件
new HtmlWebpackExternalsPlugin({
    externals: [
        {
            module: 'react',
            entry: 'https://cdn.bootcss.com/react/15.6.1/react.js',
            global: 'React'
        },
        {
            module: 'react-dom',
            entry: 'https://cdn.bootcss.com/react/15.6.1/react-dom.js',
            global: 'ReactDOM'
        },
    ],
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础库分离 需要在html中引入基础库</title>
    <script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
    <script src="https://cdn.bootcss.com/react/15.6.1/react-dom.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

预编译资源模块更好的分包策略

思路：
- 使用 webpack.dll..js 把所有的第三方库依赖，react、react-dom、redux、react-redux基础包和业务基础包打包到一个bundle的dll文件里面。
- 同时也会生成manifest.json文件。manifest.json文件是对分离出来的包的描述。该manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去。
方法：使用 DLLPlugin 进行分包，DllReferencePlugin引用 manifest.json 包。引用后，就会自动关联DLLPlugin中的包。
说明：
- DllPlugin 通常用于基础包（框架包、业务包）的分离。
- SplitChunks 虽然也可以做 DllPlugin 的事情，但是更加推荐使用 SplitChunks 去提取页面间的公共 js 文件。因为使用 SplitChunks 每次去提取基础包还是需要耗费构建时间的，如果是 DllPlugin 只需要预编译一次，后面的基础包时间都可以省略掉。
DLLPlugin详情

使用 DLLPlugin 进行分包

在一个额外的独立的 webpack.dll.js 配置中，使用 DLLPlugin 进行分包

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        //指定需要进行分离的基础包 library：当前动态链接库的名称 [name] 代表当前动态链接库的名称
        library: [
            'react',
            'react-dom'
        ]
    },
    output: {
        filename: '[name].dll.js',//输出的动态链接库(dll)的文件名称，[name] 代表当前动态链接库的名称
        path: path.join(__dirname, 'build/library'),// 输出的文件目录
        library: '[name]'//存放动态链接库的全局变量名称
    },
    plugins: [
        new webpack.DllPlugin({
            name: '_dll_[name]',//该字段的值也就是输出的 manifest.json 文件 中 name 字段的值 例如 library.manifest.json 中就有 "name": "_dll_library"
            path: path.join(__dirname, 'build/library/[name].manifest.json')//
        })
    ]
};

使用 DllReferencePlugin 引用 manifest.json

在 webpack.config.js 引入

const DllReferencePlugin = require('webpack/lib/DllReferencePlugin')
module.exports ={
    plugins: [
        new DllReferencePlugin({
          context: path.join(__dirname, 'build/library'),//(绝对路径) manifest (或者是内容属性)中请求的上下文 不设置会报错
          manifest: require('./build/library/library.manifest.json')
      })
    ]
}

参考

玩转webpack-全方位掌握webpack核心技能和优化策略

分包：设置 Externals

预编译资源模块 更好的分包策略

使用 DLLPlugin 进行分包

使用 DllReferencePlugin 引用 manifest.json

参考

预编译资源模块更好的分包策略