怎样令webpack的构建加快十倍，DllPlugin的用法

 我来答

1个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

SKYFLY6666
2017-01-01 · 超过53用户采纳过TA的回答

知道答主

回答量：83

采纳率：0%

帮助的人：42.3万

我也去答题访问个人页

关注

展开全部

安装webpack、React、react-dom
npm install --save-dev webpack
npm install --save-dev react
npm install --save-dev react-dom123123

先建立三个文件
webpack.dll.config.js 文件
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: {
vendor: ['react', 'react-dom']
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].dll.js',
/**
* output.library
* window.${output.library}に定义される
* 今回の场合、`window.vendor_library`になる
*/
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
/**
* path
* manifestファイルの出力先
* [name]の部分はentryの名前に変换される
*/
path: path.join(__dirname, 'dist', '[name]-manifest.json'),
/**
* name
* どの空间（global変数）にdll bundleがあるか
* output.libraryに指定した値を使えばよい
*/
name: '[name]_library'
})
]
};1234567891011121314151617181920212223242526272829303132333412345678910111213141516171819202122232425262728293031323334

webpack.config.js 文件
const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: {
'dll-user': ['./index.js']
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
/**
* manifestファイルをロードして渡す
*/
manifest: require('./dist/vendor-manifest.json')
})
]
};123456789101112131415161718192021123456789101112131415161718192021

index.js 文件
var React = webpack --config webpack.dll.config.js('react');
var ReactDOM = require('react-dom');
console.log("dll's React:", React);
console.log("dll's ReactDOM:", ReactDOM);12341234

建立后文件后执行
webpack --config webpack.dll.config.js11

将会在当前目录生成dist目录，该目录下面的文件有 vendor.dll.js、vendor-manifest.json
再执行
webpack --config webpack.config.js11

将会在当前目录生成dist目录，该目录下面当前的文件有 vendor.dll.js、vendor-manifest.json、vendor.dll.js
现在，我们创建一个测试文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./dist/vendor.dll.js"></script>
</head>
<body>

<script type="text/javascript" src="./dist/dll-user.bundle.js"></script>
</body>
</html>123456789101112123456789101112

打开这个index.html文件，使用chrome按F12调试，打开console选项卡，将会看到类似
Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience: https://fb.me/react-devtools

dll-user.bundle.js:56 dll's React: Object {Children: Object, PropTypes: Object, DOM: Object, version: "15.3.2"}

dll-user.bundle.js:57 dll's ReactDOM: Object {version: "15.3.2"}1234512345

的内容。则测试成功。
原文还提及构建时的缓存。
请转脚步到原文。
webpack.config.js文件中的下面代码是重点。
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
/**
* manifestファイルをロードして渡す
*/
manifest: require('./dist/vendor-manifest.json')
})
]123456789123456789

如果去除掉，生成速度将会慢很多倍。主要原因是打包的时候，将react、react-dom等等等等的插件都塞到一个包里面，不慢才怪。
要是在本地开发调试的时候，没改一下bug就得等很久很久的话，那也不太划算。
webpack管理模块的确是挺方便的，不过我还就觉得不要都打包在一个js上面。
上面的例子中的dist就是生产环境引用的js了。
比如我来说，我会每个网页的引用的js都可能不同，所以我打包时也不会将所有js打包到一个上面。

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

怎样令webpack的构建加快十倍，DllPlugin的用法

其他类似问题

为你推荐：