webpack效能優化 dll

使用dll技術, 對某些庫 (第三方庫:jquery, react, vue...)進行單獨打包,  (優化重複打包)

需要乙個配置檔案  webpack.dll.js

const  = require('path')

const webpack = require('webpack')
module.exports = ,
output:,
plugins:[
new webpack.dllplugin()
],mode:'production'
}

可以將 jquery 單獨打包，並生成乙個 manifest.json 檔案，提供和 jquery 的對映關係

打包生成 jquery.js

生成 mainfes.json

可以直接在  index.js 中 引入 jquery 庫

執行webpack.config.js,

很明顯build,打包了jquery檔案

但是，webpack 配置中需要忽略 manifest 中的 庫的打包，避免重複打包，需要 webpack 內建的外掛程式  dllreferenceplugin

webpack 重新構建打包後，就不會對 jquery 打包

但是不打包jquery,  頁面上就沒有jquery這個資源

使用 cnpm i add-asset-html-webpack-plugin –d 外掛程式

在頁面就可以使用 dll 打包的 jquery

再次構建，頁面中 引入了 使用 dll 打包的 jquery，

webpack效能優化 DLL

webpack效能優化的方式有很多種，本文之所以將 dll 單獨講解，是因為 dll 是一種最簡單粗暴並且極其有效的優化方式。在通常的打包過程中，你所引用的諸如 jquery bootstrap react react router redux antd vue vue router vuex 等等...

webpack 效能優化 dll 分包

作者回覆 是的，如果專案使用了 webpack4，確實對 dll 的依賴沒那麼大，使用 dll 相對來說提公升也不是特別明顯。而且有 hard source webpack plugin 可以極大提公升二次構建速度。不過從實際前端工程中來說，dll 還是很有必要掌握的。對於乙個團隊而言，基本是採用相...

webpack 效能優化

1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...