webpack中的optimization配置示例詳解
更新時間：2023年02月23日 11:06:58 作者：不叫貓先生
這篇文章主要介紹了webpack中的optimization配置詳解,主要就是根據(jù)不同的策略來分割打包出來的bundle,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
webpack配置optimization
- minimizer
- runtimeChunk
- noEmitOnErrors
- splitChunks
主要就是根據(jù)不同的策略來分割打包出來的bundle。
本人項目中splitChunks配置如下：
module.exports = {
chainWebpack(config) {
config.when(process.env.NODE_ENV != 'development',
config => {
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
// 第三方組件
libs: {
指定chunks名稱
name: 'chunk-libs',
//符合組的要求就給構(gòu)建venders
test: /[\\/]node_modules[\\/]/,
//priority:優(yōu)先級：數(shù)字越大優(yōu)先級越高，因為默認值為0，所以自定義的一般是負數(shù)形式,決定cacheGroups中相同條件下每個組執(zhí)行的優(yōu)先順序。
priority: 10,
// 僅限于最初依賴的第三方
chunks: 'initial'
},
elementUI: {
// 將elementUI拆分為單個包
name: 'chunk-elementUI',
// 重量需要大于libs和app，否則將打包到libs或app中
priority: 20,
// 為了適應cnpm
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
},
//公共組件
commons: {
name: 'chunk-commons',
// can customize your rules
test: resolve('src/components'),
minChunks: 3,
priority: 30,
//這個的作用是當前的chunk如果包含了從main里面分離出來的模塊，則重用這個模塊，這樣的問題是會影響chunk的名稱。
reuseExistingChunk: true,
//最大初始化加載次數(shù)，一個入口文件可以并行加載的最大文件數(shù)量，默認3
maxInitialRequests: 3,
//表示在分離前的最小模塊大小，默認為0，最小為30000
minSize: 0
},
echarts: { // split echarts libs
name: 'chunk-echarts',
test: /[\\/]node_modules[\\/]_?echarts(.*)/,
priority: 40,
chunks: 'async',
reuseExistingChunk: true
},
monaco: { // split monaco libs
name: 'chunk-monaco',
test: /[\\/]node_modules[\\/]_?monaco(.*)/,
priority: 40,
chunks: 'async',
reuseExistingChunk: true
},
'project-components': { // split project libs
name: 'chunk-project-components',
test: resolve('src/views/project'),
priority: 50,
chunks: 'async',
reuseExistingChunk: true
},
'teachers-components': { // split teacher libs
name: 'chunk-teachers-components',
test: resolve('src/views/teachers'),
priority: 60,
chunks: 'async',
reuseExistingChunk: true
},
'utils': { // split utils libs
name: 'chunk-utils',
test: resolve('src/utils'),
priority: 70,
chunks: 'async',
reuseExistingChunk: true
},
}
})
})
}
}
分析工具：webpack-bundle-analyzer
- 安裝
npm i --save-dev webpack-bundle-analyzer
- 配置
config.plugin('BundleAnalyzerPlugin').use(BundleAnalyzerPlugin).tap(() => [
{
rel: 'BundleAnalyzerPlugin',
analyzerMode: 'server', // 'server': 啟動端口服務；'static': 生成 report.html；'disabled': 配合 generateStatsFile 使用；
generateStatsFile: false, // 是否生成stats.json文件
analyzerHost: '127.0.0.1',
analyzerPort: '8667',
reportFilename: 'report.html',
defaultSizes: 'parsed',
openAnalyzer: false,
statsFilename: 'stats.json',
statsOptions: null,
excludeAssets: null
}運行
npm run build 或者 npm run dev
訪問
http://127.0.0.1:8877
分析現(xiàn)狀
擴展：webpack中module package bundle chunk詳細講解
- module 模塊 寫一個commonjs 或者amd規(guī)范的包就叫module
- package 是所有module構(gòu)成的，它是一個整體的概念，整個項目就是一個package，它可能是commonjs或者amd規(guī)范的包
- bundle是webpack打包的結(jié)果 所有的module都打包成一個文件 （module集合）
- chunk bundle是入口bundle,異步加載一個模塊，是需要運行時去處理的，獲取的過程就是一個代碼塊即chunk;由bundle獲取的包為chunk
到此這篇關(guān)于webpack中的optimization配置詳解的文章就介紹到這了,更多相關(guān)webpack配置optimization內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue監(jiān)聽頁面上的報錯信息,window.onerror和window.addEventListener(‘error‘)的區(qū)別,需要的朋友可以參考下2023-10-10
在頁面進行pdf預覽的時候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來通過本文給大家介紹vue使用pdf.js來進行pdf預覽,需要的朋友可以參考下2021-12-12
vue如何實現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實現(xiàn)Json格式數(shù)據(jù)展示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了Vue2路由動畫效果的實現(xiàn)代碼，可以根據(jù)不同的路徑去改變動畫的效果，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了如何修改ant?design組件自帶樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue?keep-alive的實現(xiàn)原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了使用Vue-cli 3.0搭建Vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本文主要介紹了vue中ref引用操作DOM元素的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了Vue3不支持Filters過濾器的問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09