av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

性能優(yōu)化篇---Webpack構(gòu)建速度優(yōu)化

如何輸出Webpack構(gòu)建分析

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)邵武,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

  •  輸出Webpack構(gòu)建信息的.json文件：webpack --profile --json > starts.json
  1.  --profile:記錄構(gòu)建中的耗時(shí)信息
  2.  --json:以json格式輸出構(gòu)建結(jié)果，只輸出一個(gè)json文件（包含所有的構(gòu)建信息）
  •  web可視化查看構(gòu)建分析：得到了webpack構(gòu)建信息文件starts.json，如何進(jìn)行很好的可視化查看？

        1. 方案一：通過可視化分析工具Webpack Analyse，是個(gè)在線Web應(yīng)用，上傳starts.json文件就可以；

        2. 方案二：安裝webpack-bundle-analyzer工具npm i -g webpack-bundle-analyzer,生成starts.json后直接在其文件夾目錄執(zhí)行webpack-bundle-analyzer后，瀏覽器會(huì)打開對(duì)應(yīng)網(wǎng)頁并展示構(gòu)建分析文檔地址webpack-bundle-analyzer

        3. webpack-dashboard是一款統(tǒng)計(jì)和優(yōu)化webpack日志的工具，可以以表格形勢(shì)展示日志信息。其中包括構(gòu)建過程和狀態(tài)、日志以及涉及的模塊列表

        4. jarvis是一款基于webapck-dashboard的webpack性能分析插件，性能分析的結(jié)果在瀏覽器顯示，比webpack-bundler-anazlyer更美觀清晰GitHub文檔地址

  •   npm i -D webpack-jarvis
  •   webpack.config.js配置：  
 
 
 
 
    
  
  
  
  
  1. const Jarvis = require("webpack-jarvis"); 
    2. 
  
  
  
  
  2.    plugins: [ 
    3. 
  
  
  
  
  3.      new Jarvis({ 
    4. 
  
  
  
  
  4.        watchOnly: false, 
    5. 
  
  
  
  
  5.        port: 3001 // optional: set a port 
    6. 
  
  
  
  
  6.      }) 
    7. 
  
  
  
  
  7.    ];
    8.
  •   port:監(jiān)聽的端口，默認(rèn)1337，監(jiān)聽面板將監(jiān)聽這個(gè)端口，通常像http://localhost:port/
  •   host:域名，默認(rèn)localhost,不限制域名。
  •   watchOnly:僅僅監(jiān)聽編譯階段。默認(rèn)為true,如果高為false，jarvis不僅僅運(yùn)行在編譯階段，在編譯完成后還保持運(yùn)行狀態(tài)。
  •   界面：看到構(gòu)建時(shí)間為：Time: 11593ms(作為優(yōu)化時(shí)間對(duì)比)

webpack配置優(yōu)化

  •  webpack在啟動(dòng)時(shí)會(huì)從配置的Entry出發(fā)，解析出文件中的導(dǎo)入語句，再遞歸解析。
  •  對(duì)于導(dǎo)入語句Webpack會(huì)做出以下操作：

        1. 根據(jù)導(dǎo)入語句尋找對(duì)應(yīng)的要導(dǎo)入的文件；

        2. 在根據(jù)要導(dǎo)入的文件后綴，使用配置中的Loader去處理文件（如使用ES6需要使用babel-loader處理）

  •  針對(duì)這兩點(diǎn)可以優(yōu)化查找途徑

1. 優(yōu)化Loader配置

  •   Loader處理文件的轉(zhuǎn)換操作是很耗時(shí)的，所以需要讓盡可能少的文件被Loader處理   
       
   
   
   
      
    
    
    
    
    1. {   
      2. 
    
    
    
    
    2.      test: /\.js$/,   
      3. 
    
    
    
    
    3.      use: [   
      4. 
    
    
    
    
    4.          'babel-loader?cacheDirectory',//開啟轉(zhuǎn)換結(jié)果緩存   
      5. 
    
    
    
    
    5.      ],   
      6. 
    
    
    
    
    6.      include: path.resolve(__dirname, 'src'),//只對(duì)src目錄中文件采用babel-loader   
      7. 
    
    
    
    
    7.      exclude: path.resolve(__dirname,' ./node_modules'),//排除node_modules目錄下的文件   
      8. 
    
    
    
    
    8.  }, 
      9.

2. 優(yōu)化resolve.modules配置

  •   resolve.modules用于配置webpack去哪些目錄下尋找第三方模塊，默認(rèn)是['node_modules']，但是，它會(huì)先去當(dāng)前目錄的./node_modules查找，沒有的話再去../node_modules最后到根目錄；
  •   所以當(dāng)安裝的第三方模塊都放在項(xiàng)目根目錄時(shí)，就沒有必要安默認(rèn)的一層一層的查找，直接指明存放的絕對(duì)位置  
 
 
 
 
    
  
  
  
  
  1. resolve: { 
    2. 
  
  
  
  
  2.             modules: [path.resolve(__dirname, 'node_modules')], 
    3. 
  
  
  
  
  3.         }
    4.

3. 優(yōu)化resolve.extensions配置

  •   在導(dǎo)入沒帶文件后綴的路徑時(shí)，webpack會(huì)自動(dòng)帶上后綴去嘗試詢問文件是否存在，而resolve.extensions用于配置嘗試后綴列表；默認(rèn)為extensions:['js','json'];
  •   及當(dāng)遇到require('./data')時(shí)webpack會(huì)先嘗試尋找data.js，沒有再去找data.json；如果列表越長，或者正確的后綴越往后，嘗試的次數(shù)就會(huì)越多
  •   所以在配置時(shí)為提升構(gòu)建優(yōu)化需遵守：

          1. 頻率出現(xiàn)高的文件后綴優(yōu)先放在前面；

          2. 列表盡可能的??；

          3. 書寫導(dǎo)入語句時(shí)，盡量寫上后綴名

  •   因?yàn)轫?xiàng)目中用的jsx較多，所以配置extensions: [".jsx",".js"],
  •  基本配置后查看構(gòu)建速度：Time: 10654ms;配置前為Time: 11593ms

使用DllPlugin優(yōu)化

  •  在使用webpack進(jìn)行打包時(shí)候，對(duì)于依賴的第三方庫，如react，react-dom等這些不會(huì)修改的依賴，可以讓它和業(yè)務(wù)代碼分開打包；
  •  只要不升級(jí)依賴庫版本，之后webpack就只需要打包項(xiàng)目業(yè)務(wù)代碼，遇到需要導(dǎo)入的模塊在某個(gè)動(dòng)態(tài)鏈接庫中時(shí)，就直接去其中獲??；而不用再去編譯第三方庫，這樣第三方庫就只需要打包一次。
  •  接入需要完成的事：

        1. 將依賴的第三方模塊抽離，打包到一個(gè)個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫中

        2. 當(dāng)需要導(dǎo)入的模塊存在動(dòng)態(tài)鏈接庫中時(shí)，讓其直接從鏈接庫中獲取

        3. 項(xiàng)目依賴的所有動(dòng)態(tài)鏈接庫都需要被加載

  •  接入工具(webpack已內(nèi)置)

        1. DllPlugin插件：用于打包出一個(gè)個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫文件；

        2. DllReferencePlugin:用于在主要的配置文件中引入DllPlugin插件打包好的動(dòng)態(tài)鏈接庫文件

  •  配置webpack_dll.config.js構(gòu)建動(dòng)態(tài)鏈接庫
 
 
 
 
    
  
  
  
  
  1. const path = require('path'); 
    2. 
  
  
  
  
  2. const DllPlugin = require('webpack/lib/DllPlugin'); 
    3. 
  
  
  
  
  3. module.exports = { 
    4. 
  
  
  
  
  4.     mode: 'production', 
    5. 
  
  
  
  
  5.     entry: { 
    6. 
  
  
  
  
  6.         // 將React相關(guān)模塊放入一個(gè)動(dòng)態(tài)鏈接庫 
    7. 
  
  
  
  
  7.         react: ['react','react-dom','react-router-dom','react-loadable'], 
    8. 
  
  
  
  
  8.         librarys: ['wangeditor'], 
    9. 
  
  
  
  
  9.         utils: ['axios','js-cookie'] 
    10. 
  
  
  
  
  10.     }, 
    11. 
  
  
  
  
  11.     output: { 
    12. 
  
  
  
  
  12.         filename: '[name]-dll.js', 
    13. 
  
  
  
  
  13.         path: path.resolve(__dirname, 'dll'), 
    14. 
  
  
  
  
  14.         // 存放動(dòng)態(tài)鏈接庫的全局變量名，加上_dll_防止全局變量沖突 
    15. 
  
  
  
  
  15.         library: '_dll_[name]' 
    16. 
  
  
  
  
  16.     }, 
    17. 
  
  
  
  
  17.     // 動(dòng)態(tài)鏈接庫的全局變量名稱，需要可output.library中保持一致，也是輸出的manifest.json文件中name的字段值 
    18. 
  
  
  
  
  18.     // 如react.manifest.json字段中存在"name":"_dll_react" 
    19. 
  
  
  
  
  19.     plugins: [ 
    20. 
  
  
  
  
  20.         new DllPlugin({ 
    21. 
  
  
  
  
  21.             name: '_dll_[name]', 
    22. 
  
  
  
  
  22.             path: path.join(__dirname, 'dll', '[name].manifest.json') 
    23. 
  
  
  
  
  23.         }) 
    24. 
  
  
  
  
  24.     ] 
    25. 
  
  
  
  
  25. }
    26.
  •  webpack.pro.config.js中使用
 
 
 
 
    
  
  
  
  
  1. const DllReferencePlugin = require('webpack/lib/DllReferencePlugin'); 
    2. 
  
  
  
  
  2. ... 
    3. 
  
  
  
  
  3. plugins: [ 
    4. 
  
  
  
  
  4.     // 告訴webpack使用了哪些動(dòng)態(tài)鏈接庫 
    5. 
  
  
  
  
  5.         new DllReferencePlugin({ 
    6. 
  
  
  
  
  6.             manifest: require('./dll/react.manifest.json') 
    7. 
  
  
  
  
  7.         }), 
    8. 
  
  
  
  
  8.         new DllReferencePlugin({ 
    9. 
  
  
  
  
  9.             manifest: require('./dll/librarys.manifest.json') 
    10. 
  
  
  
  
  10.         }), 
    11. 
  
  
  
  
  11.         new DllReferencePlugin({ 
    12. 
  
  
  
  
  12.             manifest: require('./dll/utils.manifest.json') 
    13. 
  
  
  
  
  13.         }), 
    14. 
  
  
  
  
  14. ]
    15.
  •  注意：在webpack_dll.config.js文件中，DllPlugin中的name參數(shù)必須和output.library中的一致；因?yàn)镈llPlugin的name參數(shù)影響輸出的manifest.json的name；而webpack.pro.config.js中的DllReferencePlugin會(huì)讀取manifest.json的name，將值作為從全局變量中獲取動(dòng)態(tài)鏈接庫內(nèi)容時(shí)的全局變量名
  •  執(zhí)行構(gòu)建

        1. webpack --progress --colors --config ./webpack.dll.config.js

        2. webpack --progress --colors --config ./webpack.prod.js

  •  html中引入dll.js文件
  •  構(gòu)建時(shí)間對(duì)比：["11593ms","10654ms","8334ms"]

HappyPack并行構(gòu)建優(yōu)化

  •  核心原理：將webpack中最耗時(shí)的loader文件轉(zhuǎn)換操作任務(wù)，分解到多個(gè)進(jìn)程中并行處理，從而減少構(gòu)建時(shí)間。
  •  HappyPack
  •  接入HappyPack

        1. 安裝：npm i -D happypack

        2. 重新配置rules部分,將loader交給happypack來分配：

 
 
 
 
    
  
  
  
  
  1. const HappyPack = require('happypack'); 
    2. 
  
  
  
  
  2. const happyThreadPool = HappyPack.ThreadPool({size: 5}); //構(gòu)建共享進(jìn)程池，包含5個(gè)進(jìn)程 
    3. 
  
  
  
  
  3. ... 
    4. 
  
  
  
  
  4. plugins: [ 
    5. 
  
  
  
  
  5.     // happypack并行處理 
    6. 
  
  
  
  
  6.     new HappyPack({ 
    7. 
  
  
  
  
  7.         // 用ID來代表當(dāng)前HappyPack是用來處理一類特定文件的，與rules中的use對(duì)應(yīng) 
    8. 
  
  
  
  
  8.         id: 'babel', 
    9. 
  
  
  
  
  9.         loaders: ['babel-loader?cacheDirectory'],//默認(rèn)設(shè)置loader處理 
    10. 
  
  
  
  
  10.         threadPool: happyThreadPool,//使用共享池處理 
    11. 
  
  
  
  
  11.     }), 
    12. 
  
  
  
  
  12.     new HappyPack({ 
    13. 
  
  
  
  
  13.         // 用唯一ID來代表當(dāng)前HappyPack是用來處理一類特定文件的，與rules中的use對(duì)應(yīng) 
    14. 
  
  
  
  
  14.         id: 'css', 
    15. 
  
  
  
  
  15.         loaders: [ 
    16. 
  
  
  
  
  16.             'css-loader', 
    17. 
  
  
  
  
  17.             'postcss-loader', 
    18. 
  
  
  
  
  18.             'sass-loader'], 
    19. 
  
  
  
  
  19.             threadPool: happyThreadPool 
    20. 
  
  
  
  
  20.     }) 
    21. 
  
  
  
  
  21. ], 
    22. 
  
  
  
  
  22. module: { 
    23. 
  
  
  
  
  23.     rules: [ 
    24. 
  
  
  
  
  24.     { 
    25. 
  
  
  
  
  25.         test: /\.(js|jsx)$/, 
    26. 
  
  
  
  
  26.         use: ['happypack/loader?id=babel'], 
    27. 
  
  
  
  
  27.         exclude: path.resolve(__dirname,' ./node_modules'), 
    28. 
  
  
  
  
  28.     }, 
    29. 
  
  
  
  
  29.     { 
    30. 
  
  
  
  
  30.         test: /\.(scss|css)$/, 
    31. 
  
  
  
  
  31.         //使用的mini-css-extract-plugin提取css此處，如果放在上面會(huì)出錯(cuò) 
    32. 
  
  
  
  
  32.         use: [MiniCssExtractPlugin.loader,'happypack/loader?id=css'], 
    33. 
  
  
  
  
  33.         include:[ 
    34. 
  
  
  
  
  34.             path.resolve(__dirname,'src'), 
    35. 
  
  
  
  
  35.             path.join(__dirname, './node_modules/antd') 
    36. 
  
  
  
  
  36.         ] 
    37. 
  
  
  
  
  37.     }, 
    38. 
  
  
  
  
  38. }
    39.
  •  參數(shù)：

        1. threads：代表開啟幾個(gè)子進(jìn)程去處理這一類文件，默認(rèn)是3個(gè)；

        2. verbose:是否運(yùn)行HappyPack輸出日志，默認(rèn)true；

        3. threadPool：代表共享進(jìn)程池，即多個(gè)HappyPack示例使用一個(gè)共享進(jìn)程池中的子進(jìn)程去處理任務(wù)，以防資源占有過多

代碼壓縮用ParallelUglifyPlugin代替自帶的 UglifyJsPlugin插件

  •  自帶的JS壓縮插件是單線程執(zhí)行的，而webpack-parallel-uglify-plugin可以并行的執(zhí)行
  •  配置參數(shù)：

        1. uglifyJS: {}：用于壓縮 ES5 代碼時(shí)的配置，Object 類型

        2. test: /.js$/g:使用正則去匹配哪些文件需要被 ParallelUglifyPlugin 壓縮，默認(rèn)是 /.js$/

        3. include: []:使用正則去包含被壓縮的文件，默認(rèn)為 [].

        4. exclude: []: 使用正則去包含不被壓縮的文件，默認(rèn)為 []

        5. cacheDir: ''：緩存壓縮后的結(jié)果，下次遇到一樣的輸入時(shí)直接從緩存中獲取壓縮后的結(jié)果并返回，默認(rèn)不會(huì)緩存，開啟緩存設(shè)置一個(gè)目錄路徑

        6. workerCount: ''：開啟幾個(gè)子進(jìn)程去并發(fā)的執(zhí)行壓縮。默認(rèn)是當(dāng)前運(yùn)行電腦的 CPU 核數(shù)減去1

        7. sourceMap: false：是否為壓縮后的代碼生成對(duì)應(yīng)的Source Map, 默認(rèn)不生成

 
 
 
 
    
  
  
  
  
  1. ... 
    2. 
  
  
  
  
  2. minimizer: [ 
    3. 
  
  
  
  
  3.     // webpack:production模式默認(rèn)有配有js壓縮，但是如果這里設(shè)置了css壓縮，js壓縮也要重新設(shè)置,因?yàn)槭褂胢inimizer會(huì)自動(dòng)取消webpack的默認(rèn)配置 
    4. 
  
  
  
  
  4.     new optimizeCssPlugin({ 
    5. 
  
  
  
  
  5.         assetNameRegExp: /\.css$/g, 
    6. 
  
  
  
  
  6.         cssProcessor: require('cssnano'), 
    7. 
  
  
  
  
  7.         cssProcessorOptions: { discardComments: { removeAll: true } }, 
    8. 
  
  
  
  
  8.         canPrint: true 
    9. 
  
  
  
  
  9.     }), 
    10. 
  
  
  
  
  10.     new ParallelUglifyPlugin({ 
    11. 
  
  
  
  
  11.         cacheDir: '.cache/', 
    12. 
  
  
  
  
  12.         uglifyJS:{ 
    13. 
  
  
  
  
  13.             output: { 
    14. 
  
  
  
  
  14.            // 是否輸出可讀性較強(qiáng)的代碼，即會(huì)保留空格和制表符，默認(rèn)為輸出，為了達(dá)到更好的壓縮效果，可以設(shè)置為false 
    15. 
  
  
  
  
  15.                 beautify: false, 
    16. 
  
  
  
  
  16.         //是否保留代碼中的注釋，默認(rèn)為保留，為了達(dá)到更好的壓縮效果，可以設(shè)置為false 
    17. 
  
  
  
  
  17.                 comments: false 
    18. 
  
  
  
  
  18.             }, 
    19. 
  
  
  
  
  19.             compress: { 
    20. 
  
  
  
  
  20.             //是否在UglifyJS刪除沒有用到的代碼時(shí)輸出警告信息，默認(rèn)為輸出 
    21. 
  
  
  
  
  21.                 warnings: false, 
    22. 
  
  
  
  
  22.             //是否刪除代碼中所有的console語句，默認(rèn)為不刪除，開啟后，會(huì)刪除所有的console語句 
    23. 
  
  
  
  
  23.                 drop_console: true, 
    24. 
  
  
  
  
  24.             //是否內(nèi)嵌雖然已經(jīng)定義了，但是只用到一次的變量，比如將 var x = 1; y = x, 轉(zhuǎn)換成 y = 1, 默認(rèn)為否 
    25. 
  
  
  
  
  25.                 collapse_vars: true, 
    26. 
  
  
  
  
  26.             } 
    27. 
  
  
  
  
  27.         } 
    28. 
  
  
  
  
  28. }), 
    29. 
  
  
  
  
  29. ]
    30.
  •  構(gòu)建結(jié)果對(duì)比：["11593ms","10654ms","8334ms","7734ms"]
  •  整體構(gòu)建速度從12000ms降到現(xiàn)在的8000ms

 “積跬步、行千里”—— 持續(xù)更新中~，喜歡的話留下個(gè)贊和關(guān)注哦！

  •  往期經(jīng)典好文：
    •   你不知道的CORS跨域資源共享
    •   Koa日志中間件封裝開發(fā)（log4js）
    •   團(tuán)隊(duì)合作必備的Git操作
    •   使用pm2部署node生產(chǎn)環(huán)境

當(dāng)前文章：性能優(yōu)化篇---Webpack構(gòu)建速度優(yōu)化
當(dāng)前路徑：http://uogjgqi.cn/article/cdisjis.html
掃二維碼與項(xiàng)目經(jīng)理溝通

我們?cè)谖⑿派?4小時(shí)期待你的聲音

解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流