時間：2017-02-20 17:08:41
作者：轉(zhuǎn)載
一、問題分析
webpack 會把所有的依賴文件打包成一個js文件，因此這個文件通常會很大。
這個文件包含第三方類庫，業(yè)務代碼眠副。
通常第三方代碼都是不變的， 比如react竣稽， jquery囱怕， loadsh... 霍弹，如果把他們和業(yè)務代碼打包在一起的時候，每次修改業(yè)務代碼的時候光涂，都需要再把第三方類庫代碼打包一次庞萍，這樣會比較浪費時間。
二忘闻、解決方案
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 存在的不足
不是所有的依賴庫都有 提供 生成環(huán)境的文件荣德， 比如react內(nèi)部還有很多庫有復雜的依賴關(guān)系。
2. 初級解決方案
手動把第三方的公共依賴庫打包成一個 lib-bundle.js 文件童芹， 然后在html文件中引入涮瞻。
在2016年1月多的時候，做的項目假褪，使用的就是這種方法署咽，目前公司的項目，也是使用這種方式生音。
具體看《初級解決方法教程》
3. 終極解決方案
上面的初級解決方案本質(zhì)上就是一種動態(tài)鏈接庫(dll)的思想宁否，一個dll包，就是一個純凈的依賴庫缀遍，本身不能運行慕匠，是用來給app或者業(yè)務代碼依賴的。
《webpack官網(wǎng)實例瑟由，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 官網(wǎng)的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 本質(zhì)上的做法和我們手動分離這些第三方庫是一樣的督怜，但是對于包極多的應用來說殴瘦，自動化明顯加快了生產(chǎn)效率。
三号杠、參考文章
這邊文章轉(zhuǎn)載來自下面這篇文章蚪腋， 寫的很好很詳細丰歌。建議直接看《參考文章》
- 《徹底解決Webpack打包慢的問題》 時間：2016年07月27日發(fā)布
