提高 webpack 構建 Vue 專案的速度

最近有人給我的 vue2 後台管理系統解決方案 提了 issue ，說執行 npm run build 構建專案的時候極其慢，然後就引起我的注意了。在專案中，引入了比較多的第三方庫，導致專案大，而每次修改，都不會去修改到這些庫，構建卻都要再打包這些庫，浪費了不少時間。所以，把這些不常變動的第三方庫都提取出來，下次 build 的時候不再構建這些庫，這樣既可大大縮短構建時間。那麼要怎麼去實現呢？

查詢了一下資料，發現我們可以利用 webpack 的外掛程式 dllplugin 和 dllreferenceplugin 來實現我們要的功能。

dllplugin 可以把我們需要打包的第三方庫打包成乙個 js 檔案和乙個 json 檔案，這個 json 檔案中會對映每個打包的模組位址和 id，dllreferenceplugin 通過讀取這個json檔案來使用打包的這些模組。

接下來就看如何實現。

在 build 資料夾中新建 webpack.dll.config.js (專案基於 vue-cli 的)

const path = require('path');

const webpack = require('webpack');
module.exports = ,
output: ,
plugins: [
new webpack.dllplugin(),
new webpack.optimize.uglifyjsplugin(
})]};

"scripts":

需要在 index.html 引入 vendor.dll.js

vendor-manifest.json 的內容大概如下：

},...
}

var webpack = require('webpack');

module.exports = ,
module: 
// 新增dllreferenceplugin外掛程式
plugins: [
new webpack.dllreferenceplugin(),
]}

但是存在乙個問題，當把太多的第三方依賴都打包到 vendor.dll.js 中去，該檔案太大也會影響首屏載入時間。所以要權衡利弊，可以非同步載入的外掛程式就沒有必要打包進來了，不要一味的把所有都打包到這裡面來獲取構建時的快感。

提高 webpack 構建 Vue 專案的速度

最近有人給我的 vue2 後台管理系統解決方案 提了 issue 說執行 npm run build 構建專案的時候極其慢，然後就引起我的注意了。在專案中，引入了比較多的第三方庫，導致專案大，而每次修改，都不會去修改到這些庫，構建卻都要再打包這些庫，浪費了不少時間。所以，把這些不常變動的第三方庫都提...

webpack構建vue專案深入

css css reset.css resetcss js js home home router router main.js mainjs view view index.html indexhtml package.json packagejson 配置webpack.config.js co...

webpack 構建簡單的vue專案

恢復內容開始 webpack主要執行流程 入口 loader處理 出口 webpack.config.js 檔案 const path require path 引入path模組 module.exports module resolve devserver 多檔案入口const htmlwebpa...