webpack的高級配置

Webpack的高級配置

1.Code Splitting(代碼分割)

代碼分割和webpack無關

1.webpack中實現代碼分割的兩種方式

• 同步代碼：只須要在webpack.common.js中作optimizatio的配置訪問
• 異步代碼（import）:異步代碼，無需作任何操做，會自動進行代碼分割，放置到新的文件中

打開src目錄下建立的index.js

安裝第三方包：npm install lodash --save

在index.js裏引入

import _form "lodash"

console.log(_.join(['a', 'b', 'c'],*********))

第一個參數是字符串鏈接 第二個參數是鏈接符

打印結果爲abc***********

假如改了咱們的業務邏輯代碼，用戶須要從新加載main.js，才能獲取到最新的代碼，執行顯示內容，意味代碼一變動，用戶就要從新加載2MB內容，

解決方案：

手動實現代碼分割

1. 在src目錄下建立一個lodash.js文件

2. 把index.js裏的lodah的引入放到lodash文件裏

3. import _form 'lodash'

4. window.=;

5. 把lodash掛載到全局的window上，這樣在控制檯其餘地方能夠直接使用下劃線變量了

6. index.js裏直接寫業務邏輯就能夠

7. 找到webpack.common.js文件進行配置

   entry:{

   ​ lodash:'./src/lodash.js'

   ​ main:'./src/index.js'

   }

8. 打包會生成兩個文件

9. 一個是main.js 一個是lodash.js

10. index.html會同時引入main.js和lodash.js

11. 當頁面邏輯發生變化時，只要加載main.js便可，加快頁面的加載速度

在webpack4裏有一個插件：splitChunksPlugin，而且他直接與webpack作了捆綁，不需安裝，直接配製使用

2.代碼分割的兩種解決方式

1、

配置同步代碼，只需在webpack.common.js中作optimization的配置

entry:{

​ main:"./src/index.js"

}

webpack.common.js中

optimization:{

​ splitChunks:{

​ chunks:"all" //幫作代碼分割

​ }

}

打包後生成了一個vendors~main.js文件和main.js文件在dist文件下， vendors ~main.js裏面有lodash文件內容

2、

在index.js中異步加載lodash文件

function getComponent(){

//打包並不支持下面的這種語法

return import ('lodash').then(({default:_})=>{

​ var element = document.createElement('div')

​ element.innerHTML = _.join(['Dell','Lee'],'-')

​ return element

})

}

getComponent().then((element)=>{

​ docunment.body.appendChild(element)

})

這樣會報錯

安裝：npm install babel-plugin-dunamic-import-webpack --save-dev

3.SplitChunksPlugin配置參數詳解

optimization:{

​ splitChunks:{

​ chunks:"async", //在咱們作代碼分割時，只對異步代碼有效，配置"all"會對同步異步一塊兒作分割，"inital"：對同步代碼作分割

​ minSize:30000,///大於30000才進行代碼分割，小於就不進行代碼分割

​ maxSize:0,//能夠配也能夠不配

​ minChunks:1, //當一個模塊被用了多少次，才進行代碼分割

​ maxAsyncRequest：5，//同時加載的模塊最多5個

​ maxInitialRequest:3, //入口文件引入的庫，若是作代碼分割，只能3個

​ automaticNameDelimiter:'~' //文件生成的時候，文件中間有~鏈接

​ name:true //打包生成的文件起什麼名，cacheGroups裏的名字讓它有效

​ cacheGroups:{//當打包同步代碼時，上面的參數有效

​ vendors:{//若是引入的文件大於30KB，

​ test:/[\/]node_modules[\/]/,//若是從node_modules引入的模塊把它打包到wendors.js裏

​ priority:-10, //-10優先級大，文件會被打包到wendors.js裏

​ filename:"vendors.js"

​ }，

​ default:{

​ priority:-20,

​ reuseExistingChunk:true,//若是一個模塊已經被打包過了，那再打包會忽略這個模塊，直接使用以前被打包的

​ filename:'common.js'//打包以後生成的文件名

​ }

​ }

​ }

}