詳解webpack性能優(yōu)化——DLL
Webpack性能優(yōu)化的方式有很多種,本文之所以將 dll 單獨(dú)講解,是因?yàn)?dll 是一種最簡(jiǎn)單粗暴并且極其有效的優(yōu)化方式。
在通常的打包過程中,你所引用的諸如:jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等眾多庫(kù)也會(huì)被打包進(jìn) bundle 文件中。由于這些庫(kù)的內(nèi)容基本不會(huì)發(fā)生改變,每次打包加入它們無(wú)疑是一種巨大的性能浪費(fèi)。
Dll 的技術(shù)就是在第一次時(shí)將所有引入的庫(kù)打包成一個(gè) dll.js 的文件,將自己編寫的內(nèi)容打包為 bundle.js 文件,這樣之后的打包只用處理 bundle 部分。
以一個(gè) Vue 項(xiàng)目為例,首先創(chuàng)建一個(gè)名為 webpack.dll.config.js 的文件
var path = require("path"), fs = require('fs'), webpack = require("webpack"); var vendors = [ 'vue', 'vue-router', 'vuex' ]; module.exports = { entry: { vendor: vendors }, output: { path: path.join(__dirname, "dist"), filename: "Dll.js", library: "[name]_[hash]" }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, "dist", "manifest.json"), name: "[name]_[hash]", context: __dirname }) ] };
這個(gè)文件的作用是將 vue、vue-router 以及 vuex 合并打包為一個(gè)名為 Dll.js 的靜態(tài)資源包,同時(shí)生成一個(gè) manifest.json 文件方便對(duì) Dll.js 中的模塊進(jìn)行引用。
要注意的是,執(zhí)行 webpack 命令是默認(rèn)執(zhí)行該目錄下名為 webpack.config.js 或者 webpackfile.js 的文件。所以需要通過 --config 指令手動(dòng)指定該文件,最后加入 -p 指令將 Dll.js 壓縮。
$ webpack --config webpack.dll.config.js -p
這樣,在項(xiàng)目根目錄下就會(huì)多增加一個(gè) dist 文件夾,其中有壓縮之后的 Dll.js 與 manifest.json 文件。
manifest.json 文件內(nèi)容如下,給各個(gè)模塊賦予 id 以便引用。
{ "name": "vendor_2beb750db72b1cda4321", "content": { "./node_modules/process/browser.js": { "id": 0, "meta": {} }, "./node_modules/vue-router/dist/vue-router.esm.js": { "id": 1, "meta": { "harmonyModule": true }, "exports": [ "default" ] }, "./node_modules/vue/dist/vue.runtime.esm.js": { "id": 2, "meta": { "harmonyModule": true }, "exports": [ "default" ] }, //.......
最后在 webpack.config.js 中添加引用。在 plugins 屬性中添加 DllReferencePlugin 插件,并指明 manifest.json 文件的引用路徑。
//... plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./dist/manifest.json') }) ]
在確保成功執(zhí)行 webpack.dll.config.js 文件后,執(zhí)行 webpack -p 進(jìn)行項(xiàng)目打包。
可以看到打包在 Dll 文件中的文件都被 delegated(委派) ,而不是直接打進(jìn) bundle 文件中。
這樣我們就將所有的資源完成打包,生成的 dist 目錄如下:
不過 dist 文件夾要想作為一個(gè)完整的工程還少一個(gè) html 文件,我創(chuàng)建了一個(gè)名為 pack.js 的文件,使用 nodejs 的 fileSystem 對(duì) html 文件進(jìn)行修改并拷貝。
pack.js
var fs = require('fs'); fs.readFile('./index.html', 'utf8', (err, data) => { if (!err) { var dataStr = data.toString(), timestamp = (new Date()).getTime(); dataStr = dataStr .replace('bundle.js', 'bundle.js?v='+timestamp) .replace('<!-- dll -->', '<script src="./dist/Dll.js?v='+ timestamp +'"></script>'); fs.writeFile('./dist/index.html', dataStr, (error) => { if (!error) { console.log('HTML file copy successfully'); } else { console.log(error); } }); } else { console.log(err); } });
我們需要在模塊的入口 html 中添加 <!-- dll --> 的占位字符,pack.js 的作用就是將 html 文件拷貝一份到 dist 目錄下,同時(shí)將 <!-- dll --> 替換為引用 Dll.js 的 script 標(biāo)簽,并在引用文件后添加時(shí)間戳。
<!-- .... --> <body> <div id="demo" class="container"></div> <!-- dll --> <script src="./bundle.js"></script> </body> </html>
在執(zhí)行 webpack -p 打包后,輸入下面命令運(yùn)行 pack.js,就會(huì)在 dist 目錄下生成 html 文件。
$ node pack.js
內(nèi)容如下:
<!-- .... --> <body> <div id="demo" class="container"></div> <script src="./dist/Dll.js?v=1488250309725"></script> <script src="./bundle.js?v=1488250309725"></script> </body> </html>
這樣 dist 文件夾就作為一個(gè)完整的、不需要任何手動(dòng)操作、已經(jīng)壓縮混淆后的項(xiàng)目可以直接進(jìn)行線上的部署。
實(shí)際項(xiàng)目模板參考地址如下。由于筆者作為 React 與 Vue 的雙持開發(fā)者,所以創(chuàng)建了兩個(gè)模板,以便之后通過 yomen(yo) 之類的進(jìn)行腳手架工具化。
https://github.com/Darylxyx/generator-yx-react
https://github.com/Darylxyx/generator-yx-vue
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript檢測(cè)是否開啟了控制臺(tái)(F12調(diào)試工具)
通過js來(lái)檢測(cè)開發(fā)者工具是否打開,防止別人惡意調(diào)試我們的代碼,最近我發(fā)現(xiàn)還是有蠻多人去瀏覽那篇文章,所以這里再放出一段代碼,算是個(gè)升級(jí)版吧2020-10-10詳解js跨域請(qǐng)求的兩種方式,支持post請(qǐng)求
原先一直以為要實(shí)現(xiàn)跨域請(qǐng)求只能用jsonp,只能支持GET請(qǐng)求,后來(lái)了解到使用POST請(qǐng)求也可以實(shí)現(xiàn)跨域,但是需要在服務(wù)器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers頭,下面說(shuō)明下兩個(gè)不同的方法實(shí)現(xiàn)的方式和原理。2018-05-05詳解JSONObject和JSONArray區(qū)別及基本用法
這篇文章主要介紹了詳解JSONObject和JSONArray區(qū)別及基本用法,需要的朋友可以參考下2017-10-10前端實(shí)現(xiàn)文件的斷點(diǎn)續(xù)傳(前端文件提交+后端PHP文件接收)
本文通過斷點(diǎn)續(xù)傳的簡(jiǎn)單例子(前端文件提交+后端PHP文件接收),本文以圖片為實(shí)例給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼,本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)獲取元素的封裝操作,結(jié)合實(shí)例形式分析了JS針對(duì)頁(yè)面ID、class、TAG元素獲取的函數(shù)與對(duì)象封裝操作實(shí)現(xiàn)方法,需要的朋友可以參考下2017-04-04