快捷導(dǎo)航

webpack中的optimization配置示例詳解

更新時(shí)間：2023年02月23日 11:06:58 作者：不叫貓先生

這篇文章主要介紹了webpack中的optimization配置詳解,主要就是根據(jù)不同的策略來分割打包出來的bundle,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

webpack配置optimization

minimizer
runtimeChunk
noEmitOnErrors
splitChunks

主要就是根據(jù)不同的策略來分割打包出來的bundle。

本人項(xiàng)目中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)先級(jí)：數(shù)字越大優(yōu)先級(jí)越高，因?yàn)槟J(rèn)值為0，所以自定義的一般是負(fù)數(shù)形式,決定cacheGroups中相同條件下每個(gè)組執(zhí)行的優(yōu)先順序。
                                            priority: 10,
                                            // 僅限于最初依賴的第三方
                                            chunks: 'initial'
                                        },
                                        elementUI: {
                                            // 將elementUI拆分為單個(gè)包
                                            name: 'chunk-elementUI',
                                            // 重量需要大于libs和app，否則將打包到libs或app中
                                            priority: 20,
                                            // 為了適應(yīng)cnpm
                                            test: /[\\/]node_modules[\\/]_?element-ui(.*)/
                                        },
                                        //公共組件
                                        commons: {
                                            name: 'chunk-commons',
                                            // can customize your rules
                                            test: resolve('src/components'),
                                            minChunks: 3,
                                            priority: 30,
                                            //這個(gè)的作用是當(dāng)前的chunk如果包含了從main里面分離出來的模塊，則重用這個(gè)模塊，這樣的問題是會(huì)影響chunk的名稱。
                                            reuseExistingChunk: true,
                                            //最大初始化加載次數(shù)，一個(gè)入口文件可以并行加載的最大文件數(shù)量，默認(rèn)3
                                            maxInitialRequests: 3,
                                            //表示在分離前的最小模塊大小，默認(rèn)為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': 啟動(dòng)端口服務(wù)；'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
      }

運(yùn)行

npm run build 或者 npm run dev

訪問

http://127.0.0.1:8877

分析現(xiàn)狀

擴(kuò)展：webpack中module package bundle chunk詳細(xì)講解

module 模塊寫一個(gè)commonjs 或者amd規(guī)范的包就叫module
package 是所有module構(gòu)成的，它是一個(gè)整體的概念，整個(gè)項(xiàng)目就是一個(gè)package，它可能是commonjs或者amd規(guī)范的包
bundle是webpack打包的結(jié)果所有的module都打包成一個(gè)文件（module集合）
chunk bundle是入口bundle,異步加載一個(gè)模塊，是需要運(yùn)行時(shí)去處理的，獲取的過程就是一個(gè)代碼塊即chunk;由bundle獲取的包為chunk

到此這篇關(guān)于webpack中的optimization配置詳解的文章就介紹到這了,更多相關(guān)webpack配置optimization內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: