webpack4進階概念

Tree Shaking 樹木搖晃：不用的js功能不打包

            當有多個函數功能時，只調用了其中某一些函數，可是打包時，會通通所有打包，形成浪費，這個時候就要使用「搖樹」，將沒有用到的功能搖出去，再打包；

            業務代碼中凡是用import引入都模塊，都會檢查是否調用了模塊裏面的方法

            開發模式下，沒有調用的函數，也仍是會打包進去，由於會調試，

            可是生產環境，就會完全生效，不過生產環境無需配置，可是package.json中仍是要設置

             

               package.json中規定哪些文件不用檢查

                 這裏是全部css文件不檢查，若是沒有則是false

 

Develoment和Production模式的區分打包：開發模式和生產模式

            未區分前：共同使用一個配置，容易形成配置的臃腫，多餘；

                      

                區分配置：有些配置只適合某一個模式，就不是形成配置多餘；

              將webpack.config.js配置，分爲兩種模式的打包方式

              分別配置webpack.dev.js開發配置和webpack.prod.js生產配置

               

              在package.json中的啓動方式要經過--config來改變

                

                可是，若是僅上面這樣建立兩個配置，裏面又有大量相同的內容，又形成浪費：

                接着建立一個webpack.common.js的公共配置，用來放webpack.dev.js開發配置和webpack.prod.js生產配置的公共部分

                 提取公共部分結束後，安裝npm install webpack-merge --save-dev,合併配置；用來公共配置與webpack.dev.js和webpack.prod.js的結合

                  以合併生成環境配置爲例：

                   

                     合併結束能夠用完美來形容。。。。可是看着不舒服啊，根目錄下多了3個配置   

                      

                     新建一個build文件夾，將3個配置放進去，而後在package.json中啓動要添加路徑

                             

                      

                       vue-cli就是這樣處理開發模式和生產模式。。。。。。這下看着舒服了

 

webpack和code Splitting:

        JS代碼分割，與webpack無關,經過對代碼的拆分提升性能；

                   將業務代碼和引用的庫、模塊分割打包，會同時引用兩個js文件，比不分割引用一個大的js文件性能高；並且改變業務代碼，瀏覽器不會再重載引用的庫，大大提升性能；

                 1.同步代碼：import引入庫、模塊再繼續執行業務代碼，按順序

                   all是異步同步都分割

                   

                   2.異步代碼：在函數裏面引入庫、模塊，就無需配置，也會分割，由於有默認值

                

                  不過異步代碼打包庫出來的js名字默認是數字.js  如：0.js,不是很好看，能夠在引入的設置

                   這個註釋就能夠更名字輸出

                   

                    可是輸出的名字會帶一個vendors~,上圖輸出的就是vendors~loadsh.js,要想移出vendors,須要在webpack中配置

                     

                     代碼分割，若是不寫會有默認配置

                         等價於   

                     參數的意思以下圖

                      

 

                     

        Lazy loading 懶加載：經過對代碼的分割

，一些異步加載的模塊，在頁面刷新時，不須要展現，就不用加載，而後在用戶完成須要或將須要新代碼塊的操做後加載它。這會加速應用程序的初始負載，並減輕其總體重量，由於某些塊甚至可能永遠不會加載。

 

 

打包內容分析：webpack提供了一個庫analyse；github上有

 

                     在package.json中打包快捷鍵中增長紅線的字符，打包出來會多一個stats.json文件，

                    訪問http://webpack.github.com/analyse，上傳這個json文件便可

                     

                   webpack推薦用異步：異步能夠減小首屏時間，提升性能，可是當觸發某異步的文件時，又會感受加載變慢，影響體驗；

                解決方法：Prefetching modules；空閒時間偷偷加載

就是首屏加載完成後，在閒置的時間能加載異步，當觸發時，異步已經加載過了，因此就會很快，而也不會影響首屏的加載

               引入異步模塊時，使用魔法註釋：/* webpackPrefetch:true */就能夠

 

                

 

前言webpack的打包會把css打包到js中去,因此便有了css代碼分割

        css代碼分割：

MiniCssExtractPlugin，不支持熱模塊，因此改變css要手動刷新，下降開發效率，因此只適用於生成環境打包用

       npm install --save-dev mini-css-extract-plugin

       

        

         使用MiniCssExtractPlugin.loader替換style-loader

          

         也有配置：能夠將全部的css代碼分割到一個文件中

           

 

        可是這樣分離出來的代碼，是沒有被壓縮的代碼。。。。。

         安裝壓縮合並CSS插件Minimizing For Production：

               npm install optimize-css-assets-webpack-plugin --save-dev      

         

         

 

 

webpack與瀏覽器緩存Caching:

          開發環境不存在這個，在生產環境中，打包的文件上傳服務器，被用戶使用後，會被緩存在瀏覽器時；當須要修改代碼時，又從新打包上傳，而用戶的瀏覽器發現加載的文件名字同樣，就不會從新加載，仍是會從緩存中加載，就形成了修改的代碼不能更新使用；

        解決方法：每次打包的文件，都會有本身的hash值，只要文件修改，hash值纔會變化，不修改，不管打包幾回，值都不會發送改變；

       在webpack.prod.js生成配置中輸出時使用contenthash,這樣修改的文件名就會改變，而用戶的瀏覽器發現不同的文件，就會從新加載，相同名文件則不會加載，這有提升了性能

         

 

 

 

Shimming:墊片，解決某些問題

        webpack的核心就是模塊與模塊之間分開，

         可是當有些公共模塊或庫須要在多個模塊中調用，

         或者好比有一些第三方庫使用了JQ的$,可是不是用import引用的，當你調用時，不能識別，

         就能夠在webpack的配置中引入webpack的插件ProvidePlugin

        

       以JQ爲例，當模塊使用$時，就會自動在模塊頂部添加import $ from 'jquery'