webpack DllPlugin優化工程構建速度

2021-08-21 16:03:01 字數 1659 閱讀 3789

如果我們的webpack工程變得越來越大,我們會發現,我們工程打包的速度會變得越來越慢。為了提公升我們的開發效率,我們應該要做一些優化。

一般來說,如果我們的工程涉及了很多的第三方庫,而我們的第三方庫一般來說都是不會被修改的,因此,我們的做法就是把第三方庫作為乙個檔案提取出來,避免每次修改**都會對第三方庫重新構建,而且業務**本身的模組體積也會小很多,頁面的載入速度也可以有提公升。

webpack.config.js

entry: ,
在入口新增多乙個key:vendor,指定第三方庫檔名稱。

使用commonschunkplugin外掛程式,把vendor作為公共**提取出來。

new webpack.optimize.commonschunkplugin(),
我們是將將公用的第三方庫通過 commonschunkplugin 來打包成為乙個 common.js。

根據這個 common.js 的內容來看,這裡面存放的就是各個 entry 引用的公有的**,比如,我們的很多元件都會用到 react 或者 redux 這些第三方庫。通過將公有的**單獨打包成乙個檔案,然後再將業務**打包成乙個檔案,這樣一來,業務**模組本身的體積就會減小很多,頁面的載入速度也能夠得到很大的提公升。

雖然這樣打包的方式能夠在一定程度上提公升頁面的載入速度,但是,我們簡單的想一想也知道,commonschunkplugin 會去將所有 entry 中的公有模組遍歷出來再進行編譯壓縮混淆,這個過程是非常緩慢的(我們的專案以前在使用這種方式的時候,在這一步會花上至少十二分鐘的時間,你可以想象這個過程有多麼漫長)。

使用dllplugin可以大大提公升我們工程的構建速度,dllplugin不是單獨使用的,它要和dllreferenceplugin結合一起使用。先看看它的使用方法。

1、先單獨建立乙個webpack.dll.config.js檔案

const path = require('path');

const webpack = require('webpack');

module.exports = ,

output: ,

plugins:[

new webpack.dllplugin()

]}

可以看到,我們主要的操作是在 plugins 配置中,生成的檔名就是我們所定義的 entry 的名稱,json 檔名可以根據自己的需要來命名。像上面這樣,我們就可以將我們的一些公用模組打包出來了。

2、package.json中新增打包命令

「scripts」:
執行此命令,會生成兩個檔案,分別是vendor-manifest.json和vendor.dll.js。

3、在原來的webpack配置檔案中,新增dllreferenceplugin的配置

plugins:[

...new webpack.dllreferenceplugin()

],

然後,再執行我們的打包命令,可以看出,我們工程的構建速度是有提公升。不過由於我的工程本來就很小,只是由原來的4s提公升到2s。

注意,我們必須要再index.html裡面手動引入,vendor.dll.js必須在bundle.js之前引入,因為bundle.js依賴vendor.dll.js。

彙編優化工具

彙編優化工具 使彙編 更具可讀性,並提高彙編速度 優化15000行大約須要30秒 import rfile.h main rstr line del rstr s 符號替換 rstr sym replace rstr s rstr sym trans rstr s rstr seq replace ...

Django優化工具

users user.objects.all users.explain 0 0 0 scan table account user user users.filter id 1 user.explain 0 0 0 search table account user using integer p...

SQL優化工具

sql語句是對資料庫進行操作的惟一途徑,對資料庫系統的效能起著決定性的作用。對於同一條件下的sql語句寫法有很多,其中一些寫法往往對效能又有很大影響。但是每個人掌握sql語言的水平不同,如何才能保證寫出高效能的sql呢?針對這種情況,人工智慧自動sql優化工具應運而生。現在我就向大家介紹這樣一款工具...