React系列---Webpack环境搭建（一）手动搭建
React系列---Webpack环境搭建（二）不同环境不同配置
React系列---Webpack环境搭建（三）打包性能优化
实际项目，动辄上千个模块，打包花1分钟以上是很常见的。我们构建的时候，往往希望自己的代码和第三方库（vendors）可以分开打包，因为不涉及到升级第三方库时，就没必要每次浪费打包时间在这上面。
Dll（动态链接库）是Webpack后面加入的功能，Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯粹的依赖库，它本身不能运行，是用来给你的app引用的。
打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。
这么一来有几个好处：
- Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。
- App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。
- 假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。
如何使用呢？
首先要先建立一个dll的配置文件，entry只包含第三方库。
webpack.dll.config.js：
const path = require('path')
const webpack = require('webpack')
const ROOT_PATH = path.resolve(__dirname);
const vendors = [
'react',
'react-dom',
'react-redux',
'react-router',
'react-router-redux',
'redux',
'redux-actions',
'antd',
'moment',
];
module.exports = {
entry: {
vendor: vendors
},
output: {
path: path.resolve(__dirname, 'lib'),
filename: '[name].dll.js',
library: '[name]_lib',
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(ROOT_PATH, 'lib', 'manifest.json'),
name: '[name]_lib',
context: ROOT_PATH,
}),
],
}webpack.DllPlugin的选项中，path是manifest文件的输出路径；name是dll暴露的对象名，要跟output.library保持一致；context是解析包路径的上下文，这个要跟下面要配置的DllReferencePlugin保持一致。
修改package.json，增加dll命令：
"scripts": {
"dll": "rimraf ./lib && webpack --config webpack.dll.config.js",
"start": "webpack-dev-server --hot --progress --config webpack.dev.config.js",
"build:dev": "rimraf build && webpack --progress --config webpack.dev.config.js",
"build:test": "rimraf build && webpack --progress --config webpack.test.config.js",
"build:prod": "rimraf build && webpack --progress --config webpack.prod.config.js"
},执行命令，生成第三方依赖dll库：
npm run dll可以看到lib目录下生成了两个文件：
修改webpack.base.config.js配置，增加DllReferencePlugin插件配置：
plugins: [
new webpack.DllReferencePlugin({
manifest: require(path.resolve(ROOT_PATH, 'lib', 'manifest.json')),
context: ROOT_PATH,
})
]这么一来，已做成dll库的那部分模块，webpack将不会重复打包。DllReferencePlugin的选项中，context需要跟之前保持一致，这个用来指导Webpack匹配manifest中库的路径；manifest用来引入刚才输出的manifest文件。
最后修改一下模板index.html，增加引用vendor.dll.js文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="../lib/vendor.dll.js"></script>
</body>
</html>给入口文件再加点依赖模块，方便打包观察：
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
function Index() {
return (
<div className="container">
<h1>Antd DatePicker!</h1>
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
</div>
);
}
ReactDOM.render(<Index />, document.getElementById('root'));
export default Index;运行打包：
npm run build:dev
可以看到，入口文件里依赖的react，moment模块，直接引用了dll。
对比一下不做分离的情况下打包的结果：
速度快了，文件也小了。平时开发的时候，修改代码后重新编译的速度会大大减少，节省时间。
代码：https://github.com/zhutx/reac...
React系列---Webpack环境搭建（一）手动搭建
React系列---Webpack环境搭建（二）不同环境不同配置
React系列---Webpack环境搭建（三）打包性能优化
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。