时间：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或者业务代码依赖的。
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日发布
