webpack优化篇（四十五）：进一步分包：预编译资源模块

Posted 2022-08-22 凯小默

说明

玩转 webpack 学习笔记

分包：设置 Externals

思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中。

方法：使用 html-webpack-externalsplugin

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

module.exports = 
    plugins: [
        new HtmlWebpackExternalsPlugin(
            externals: [
                
                    module: 'react',
                    entry: '//11.url.cn/now/lib/15.1.0/react-with-addons.min.js?_bid=3123',
                    global: 'React'
                , 
                    module: ' react-dom',
                    entry: '//11.url.cn/now/lib/15.1.0/react-dom.min.js?_bid=3123',
                    global: 'ReactDOM'
                
            ]
        )
    ]

进一步分包

思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件

方法：使用 DLLPlugin 进行分包，DllReferencePlugin 对 manifest.json 引用

使用 DLLPlugin 进行分包

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

module.exports = 
    context: process.cwd(),
    resolve: 
        extensions: ['.js', '.jsx', '.json', '.less', '.css'],
        modules: [__dirname, 'node_modules']
    ,
    entry: 
        library: [
            'react',
            'react-dom',
            ' redux',
            ' react-redux '
        ]
    ,
    output: 
        filename: '[name].dll.js',
        path: path.resolve(_dirname, './build/library'),
        library: '[name]'
    ,
    plugins: [
        new webpack.DllPlugin(
            name: ' [name]',
            path: './build/library/[name].json'
        )
    ]
;

使用 DllReferencePlugin 引用 manifest.json

在 webpack.config.js 引入

module.exports = 
    plugins: [
        new webpack.DllReferencePlugin(
            manifest: require('./build/library/manifest.json')
        )
    ]
;

引用效果：

实战进一步分包

Step 1. 新建文件 webpack.dll.js

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

module.exports = 
    entry: 
        library: [
            "react",
            "react-dom"
        ]
    ,
    output: 
        filename: "[name]_[chunkhash].dll.js",
        path: path.join(__dirname, "build/library"),
        library: "[name]"
    ,
    plugins: [
        // webpack 内置插件
        new webpack.DllPlugin(
            name: "[name]_[hash]",
            path: path.join(__dirname, "build/library/[name].json")
        )
    ]

Step 2. 在 package.json 里添加 dll 分包的脚本

 "scripts": 
 	"dll": "webpack --config webpack.dll.js"
 ,

Step 3. 运行命令

npm run dll
# 或者
webpack --config webpack.dll.js

生成的文件如下：

Step 4. 先不分包，运行一下 npm run build

Step 5. 在 webpack.prod.js 插件里添加分包

new webpack.DllReferencePlugin(
    manifest: require("./build/library/library.json")
)

在运行 npm run build

我们可以看到速度跟体积都有了明显降低。