【20170220】Webpack打包第三方库，DLL的使用

zhongxia245 commented 7 years ago

时间：2017-02-20 17:08:41
作者：转载

一、问题分析

webpack 会把所有的依赖文件打包成一个js文件，因此这个文件通常会很大。

这个文件包含第三方类库，业务代码。

通常第三方代码都是不变的，比如react， jquery， loadsh... ，如果把他们和业务代码打包在一起的时候，每次修改业务代码的时候，都需要再把第三方类库代码打包一次，这样会比较浪费时间。

二、解决方案

1. 配置externals

webpack可以配置把 externals 来将依赖的库指向全局变量，从而不在打包这个库

import React from 'react';
console.log(React);

如果你在 Webpack.config.js 中配置了externals：

module.exports = {
    externals: {
        'react': 'window.React'
    }
    //其它配置忽略...... 
};

等于让 Webpack 知道，对于 react 这个模块就不要打包啦，直接指向 window.React 就好。不过别忘了加载 react.min.js，让全局中有 React 这个变量。

我们来看看性能，因为不用打包 React 了所以速度自然超级快，包也很小：

externals 存在的不足

不是所有的依赖库都有提供生成环境的文件，比如react内部还有很多库有复杂的依赖关系。

2. 初级解决方案

手动把第三方的公共依赖库打包成一个 lib-bundle.js 文件，然后在html文件中引入。

在2016年1月多的时候，做的项目，使用的就是这种方法，目前公司的项目，也是使用这种方式。

具体看《初级解决方法教程》

3. 终极解决方案

上面的初级解决方案本质上就是一种动态链接库(dll)的思想，一个dll包，就是一个纯净的依赖库，本身不能运行，是用来给app或者业务代码依赖的。

《webpack官网实例，dll， dll-user》

3.1 使用 webpack.DllPlugin

使用这个插件来打包 dll类库，然后在html中引用这个库.

打包的时候，会生成 js文件以及对应的 mainfest.json文件。

var path = require("path");
var webpack = require("../../");
module.exports = {
    resolve: {
        extensions: [".js", ".jsx"]
    },
    entry: {
        alpha: ["./alpha", "./a", "module"],
        beta: ["./beta", "./b", "./c"]
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "MyDll.[name].js",
        library: "[name]_[hash]"
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "js", "[name]-manifest.json"),
            name: "[name]_[hash]"
        })
    ]
};

3.2 使用 webpack.DllReferencePlugin 来使用 dll文件

webpack 官网的demo 配置

var path = require("path");
var webpack = require("../../");
module.exports = {
    plugins: [
        new webpack.DllReferencePlugin({
            context: path.join(__dirname, "..", "dll"),
            manifest: require("../dll/js/alpha-manifest.json") // eslint-disable-line
        }),
        new webpack.DllReferencePlugin({
            scope: "beta",
            manifest: require("../dll/js/beta-manifest.json"), // eslint-disable-line
            extensions: [".js", ".jsx"]
        })
    ]
};

DllPlugin 本质上的做法和我们手动分离这些第三方库是一样的，但是对于包极多的应用来说，自动化明显加快了生产效率。

三、参考文章

这边文章转载来自下面这篇文章，写的很好很详细。建议直接看《参考文章》

《彻底解决Webpack打包慢的问题》时间：2016年07月27日发布

zhongxia245 commented 7 years ago

在之前做过的项目中，那个时候还不知道有dll库，但是使用的方法就是上文的初级解决方案，手动打包第三方库。如果项目依赖的公共第三方不多的话，并且不嫌麻烦的话，使用这种方法并没有什么不可以的。

oliyg commented 6 years ago

mark 之前一直都是用 externals 非常不方便

zhongxia245 / blog