# 分包:设置 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')
          })
        ]
    }
    

# 参考

更新时间: 5/13/2020, 11:23:00 PM