##目錄css
1、Tree Shaking的概念
2、Development和Production模式的區分打包
3、Webpack和Code Spliting
4、SplitChunksPlugin配置參數詳解
5、Lazy Loading懶加載，Chunk是什麼？
6、打包分析
7、CSS文件的代碼分割
8、webpack與瀏覽器緩存（caching）
9、Shimming
10、環境變量的使用
1、Tree Shaking的概念
1. 若是設置了此配置，能夠不用在js文件中單獨引入polyfill
2. Tree Shaking (只支持ES module這種靜態導入的方式導入) 對一些用到的包纔打包，沒有用到的代碼不打包
概念：最理想的方式是我引用什麼，打包什麼，tree shaking就是搖掉沒用的東西
由於它是靜態引入，CommonJS是動態引入。node
3. 如何添加tree shaking ？
3.1 在開發環境下
而後還須要在package.json中設置 webpack
最終 development狀況下是這樣 git
3.2 若是設置mode:'production'下：（會自動寫好optimization，不須要在webpack配置中單獨添加）
就只會引入使用的，沒有使用的就不會引入，減小壓縮內存github
3.3 額外須要注意的是： 有些狀況下會遇到一個問題
3.3.1 例如pollyfill沒有導出任何文件，可是又須要它，可能會出問題，能夠對須要特殊處理的添加到此處，這樣tree shaking就不會過濾掉它，會正常引入
3.3.2 還有例如css文件也須要正常引入，這樣tree shaking就不會過濾它
2、 Development和Production模式的區分打包
咱們建立兩份webpack打包環境 開發版本 webpack.dev.js 上線版本 webpack.prod.js （代碼通常是壓縮過的代碼）web
而後在package.json中兩份腳本 npm
因爲開發和上線版本的配置文件存在大量相同的代碼，能夠提取出一個webpack.common.js中,並 引入一個合併模塊 json
- npm i webpack-merge -D
- 提取相同的代碼
1.3 合併 瀏覽器
1.4 從新改下配置文件 緩存
$nbsp;
3、Webpack和Code Spliting
1. 使用dev環境打包一次 遇到一個問題，
2 問題1.打包生成的東西放到了build下？
解決辦法：
3 問題2.清除上一次打包文件出錯，解決辦法：
清除root下的dist下的全部文件
、、、、webpack的插件特別的多，再出了問題的時候，到google或者overflowstack上找問題、、、
4. code spliting是什麼？
4.1 場景1： npm install loadash --save （一個字符串庫）
4.2 問題1：會遇到一個問題，打包完之後，若是不作壓縮和代碼閹割，那麼代碼量會很是大。
4.3 問題2：因爲第三方庫代碼更新機率不高，可是業務代碼會不斷迭代，就致使每次都要把第三方庫打包進去。
4.4 解決辦法1：手動思考如何閹割
1.建立一個loadsh.js
- 正常寫業務邏輯
- 再次配置webpack 兩種方式對比：
4.5 解決辦法2：自動閹割
只須要在webpack中添加一個配置項
4.6 解決辦法3：異步加載
-
用異步的方式寫
-
安裝動態引入包的插件
-
而後配置一下，使得babel能夠去處理這種異步語法
-
打包完之後，會把異步的代碼放到一個單獨的文件裏面
小結
代碼分割，和webpack無關 webpack中實現代碼分割，兩種方式
- 同步代碼： 只須要在webpack.common.js中作optimization的配置便可
- 異步代碼(import)： 異步代碼，無需作任何配置，會自動進行代碼的分隔，放置到新的文件中
4、 SplitChunksPlugin配置參數詳解
1 demo
-
這一次，咱們移出上述說的分割插件，使用一個官方提供的動態引入的插件
-
安裝和配置
-
從新打包 （magiccommon語法，引入這個文件後打包後的名稱爲）
-
發現問題，上述文件名怎麼前面加了wendors
-
解決
-
再次打包
2 參數講解
1. chunks: 'async'
支持異步導入，同步導入不支持
1.1 只設置chunks: 'all'
依然不會作代碼的分割。
1.2 進行以下設置
引入同步的庫，會判斷chunks: 'all，而後會進入cacheGroups下面，判斷引入的庫在不在vendors裏面，
1.3 問題： 名字存在個venders~main
解決辦法： cacheGroups
2. minSize: 30000 只有包大於30k這個程度纔會進行代碼分割。
3. 對於非node_modules下同步引入的一些模塊 好比import Test from './Test'
4. minChunks: 2
一個包同時被引入的此處大於大於2時纔對這個包分割打包
5. maxAsyncRequests: 5
異步加載的模塊最大數爲5，最多分割數爲前5個，超出部分不分割
6 maxInitalRequests: 3
入口文件開始加載的時候，入口文件最多能分割3個，超過部分不分割
7. automaticeNameDelimiter: '~‘
沒有設置filename的時候，會用~鏈接符
8. name: true
是指cacheGroups下的filename有效
9. cacheGroups會決定分割下來的放在哪裏
9.1 同時知足的條件，根據優先級來決定放到哪一個文件裏面
9.2
已經被打包的文件不會重複打包，直接使用以前打包好的包
5、 Lazy Loading懶加載，Chunk是什麼？
1. 懶加載
使用的時候，在加載對應打包好的包。
6、打包分析
1.從新配置，會將打包過程放到stats.json中
www.github.io/analyse 能夠把這個文件上傳看分析結果
2.打包分析插件
3. 查看當前包利用率
讓頁面更加高效 splitChunks默認爲asyc的緣由就是爲了，讓更多異步代碼更高效
4. webpackPrefetch: true 會在網絡空閒時，預加載其餘須要懶加載的包
5. 而webpackLoad是在加載全部的時候加載
所以，在從此開發中，不要再只關注緩存所帶來的性能提高，其帶來的提高比較低。能夠多關注下頁面加載的js文件利用率更高，使得代碼性能更高，頁面運行效率更快。固然也要注意下，在一些瀏覽器上有兼容性問題。
7、CSS文件的代碼分割
線上環境用的多，由於還不支持開發環境熱更新。
（若是直接被一個頁面引用，會走上面的filename，若是是間接使用，用chunkFilename） 而後須要從新配置webpack
還須要改個，讓css文件不作tree shaking
2. 代碼作壓縮合並
而後配置
3. 問題又來了，但願多個入口的js文件裏面用到的css文件都打包到一個css文件中
例如
總結
1. filename和chunkFilename要弄清楚？
2. css這個插件只能應用於線上環境中
2. 安裝完畢後，替換原來的css loader
3.
4.
緣由是它涉及到tree shaking這樣一個概念
5.
6.
能對代碼壓縮合並
8、webpack與瀏覽器緩存（caching）
打包內容變的時候，contenthash會變，避免從新上線後，請求瀏覽器緩存
2. webpack老版本用戶，即使代碼沒有變更，hash仍是有可能不相同
配置
會新增一個runtime文件
把邏輯和業務代碼的關聯manifest，抽離出來放在了runtime中，這樣main中只有業務代碼，vendors中只有第三方代碼
9、Shimming
webpack的墊片，打包出來的代碼可能在低版本上沒法運行，解決webpack的兼容性問題。
場景1：
一些舊的第三方插件，可能會遇到在模塊中沒有引入對應的包，而後又想使用（這個包可能在node_modules，又沒法更改源碼引入）
1. 引入webpack
2.配置
能夠把須要引入的包，都經過webpack.ProvidePlugin中配置
3. 補充說明語法
上述表示，使用lodash/join
場景2：
結果爲false，this指向的是當前模塊
1.安裝
2. 配置
會先走imports-loader並把this指向window
10、環境變量的使用
場景： 打包配置從新配置，webpack.dev.js和webpack.prod.js中導出對應的配置，不合成，最後經過在webpack.common.js中根據env判斷環境輸出對應配置文件。
1.
2. 往webpack中傳入一個env.production
（固然也能夠不必定非要env.production 也能夠直接傳入production甚至是一個變量，只要正確接收便可）
固然咱們仍是會採起以前的方式，在對應的文件中分別配置環境，此節內容主要是爲了講述，能夠在webpack中引入一個全局的變量