zhongxia245/blog

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

Closed this issue · 2 comments

时间: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 本质上的做法和我们手动分离这些第三方库是一样的,但是对于包极多的应用来说,自动化明显加快了生产效率。

三、参考文章

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

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

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

oliyg commented

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