react專案實戰（許可權模組開發八）js檔案分開打包
阿新 • • 發佈：2019-01-09
才開發幾個介面就發現打包出的index.js檔案就有700多kb了，由於部分外掛的js檔案是不會變化的，單獨打包可以充分利用瀏覽器的快取功能。
第一步：在專案跟目錄下面新增一個webpack.config.js檔案
第二步：為了將原有的js分開打，需要修改entry的指定.。由於我的專案用到了jquery，所以將jquery單獨達成一個獨立檔案，再將react的相關元件打包成vendors.js。
webpackConfig.entry={
"index": "./src/index.js",
vendor: vendors,
jquery:["jquery"]
} 第三步：指定外掛引用資訊：
webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({
names: ["jquery","vendor"],
minChunks: Infinity
}));config檔案的全部內容如下：
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src/');
var webpack=require 這裡是將js檔案再壓縮成gzip格式。
webpackConfig.plugins.push(new CompressionWebpackPlugin({ //gzip 壓縮
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(js|css)$' //壓縮 js 與 css
),
threshold: 10240,
minRatio: 0.8
}));第四步：修改下public/index.html檔案內容，因為我們將相應外掛是單獨打包自然我們需要額外的引用相應的js檔案，注意要將vendor.js放在第一位，如果把jquery放在第一位，會報錯誤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dva Demo</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="root"></div>
<script src="vendor.js"></script>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
ok可以啟動試試，執行下 npm run build看下打包的結果：
