溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在使用webpack過程中，本人也發現發現構建速度非常慢，Webpack性能優化的方式有很多種，本文介紹了dll，dll是一種最簡單粗暴并且極其有效的優化方式。
前言
在用 Webpack 打包的時候，對于一些不經常更新的第三方庫，比如 react，lodash，我們希望能和自己的代碼分離開，Webpack 社區有兩種方案
對于 CommonsChunkPlugin，webpack 每次打包實際還是需要去處理這些第三方庫，只是打包完之后，能把第三方庫和我們自己的代碼分開。而DLLPlugin 則是能把第三方代碼完全分離開，即每次只打包項目自身的代碼。
用法
要使用 DLLPlugin，需要額外新建一個配置文件。所以對于用這種方式打包的項目，一般會有下面兩個配置文件
先來看下 webpack.dll.config.js
const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
entry: {
vendors: ['react', 'lodash']
},
output: {
filename: '[name].dll.js',
path: 'dist/',
library
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'dist/[name]-manifest.json'),
// This must match the output.library option above
name: library
}),
],
}
再改下 webpack.config.js 文件
const webpack = require('webpack')
module.exports = {
entry: {
app: './src/index'
},
output: {
filename: 'app.bundle.js',
path: 'dist/',
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendors-manifest.json')
})
]
}
manifest: require('./dist/vendors-manifest.json') 這里的路徑要和 webpack.dll.config.js 里面的對應。
然后運行
$ webpack --config webpack.dll.config.js $ webpack --config webpack.config.js
然后你的 html 文件像下面這樣引用
<script src="/dist/vendors.dll.js"></script> <script src="/dist/app.bundle.js"></script>
DLL Link Plugin
上面的用法也存在一些不方便的地方，比如在 webpack.config.js 中要明確指出對應的 manifest.json 文件。還有當 DLL 需要更新的時候，比如 react 升級了，或者加入新的第三方庫，都需要手動像下面這樣編譯一次。
$ webpack --config webpack.dll.config.js
因為上面這些問題，所以基于官方的 DllReferencePlugin，我寫了一個打包的插件，Dll Link Plugin。
使用這個插件，只需要對 webpack.config.js 作下小小的改動
const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')
module.exports = {
// ...
plugins: [
new DllLinkPlugin({
config: require('webpack.dll.config.js')
})
]
}
直接替換掉 DllReferencePlugin，然后傳入對應的 DLL 配置文件就可以了。每次打包的時候，只需要運行
$ webpack --config webpack.config.js
上面的命令便會自動生成對應的 vendors 文件，需要更新的時候，也會自動更新。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
