第五章webpack工程化-4節(jié)內(nèi)容補(bǔ)充-day

Wck-wck性能優(yōu)優(yōu)化開提升效優(yōu)化輸提升代碼性能，性能好，執(zhí)行就快縮小文testincludeexclude三個(gè)配置縮小loader的處理范圍include:include:path.resolve(dirname,優(yōu)化resolve.modules配 尋找第模塊，默認(rèn)是在當(dāng)前項(xiàng)目 去../../node_modules中找，以此類推，和Node.js的模塊尋找機(jī)制很如果我們的第模塊都安裝在了項(xiàng)目根 modules:[path.resolve(dirname,}}優(yōu)化resolve.alias配已經(jīng)打包好的完整代碼，沒有采用模塊化，可以直默認(rèn)情況下，wck會從文件///at/indx開時(shí)。aliasalias:"@":path.join(dirname,"./pages"),react:path.resolve(dirname,"react-dom":)}優(yōu)化resolve.extensions配默認(rèn)值后綴嘗試列表盡量 使用靜態(tài)資源路徑通過將資源部署到世界各地，使得用戶可以就近資源，加快速度。要接入N，需要把網(wǎng)頁的靜態(tài)資源上傳到N服在資源時(shí)，使用N服務(wù)提供的L。publicPatch:}指定存放JS文件的CDN確保靜態(tài)資源文件的上css文件的處$$npminstalllessless-loader--save-{test:use:["style-loader","css-loader","less-} npmnpmipostcss-loaderautoprefixer-module.exports={[overrideBrowserslist:["last2versions",test:include:path.resolve(dirname,"./src"),use:[{options:{}]{body{divdisplay:flex;border:1pxredsolid;}}]如果不做抽取配置，我們 是直接打包 里面的，我們希望能

借助MiniCssExtractPlugin完成npmnpminstallmini-css-extract-plugin-constconstMiniCssExtractPlugin=require("mini-css-extract-{use:["style-loader"不再需要style-loader"css-loader",//編譯css"sass-loader編譯]plugins:newchunkFilename:"[id].css"]壓縮借助optimize-css-assets-wck-借助npminstallcssnano-npmioptimize-css-assets-ck-plugin-constOptimizeCSSAssetsPlugin=require("optimize-css- newcssProcessorrequire("cssnano"http://引入cssnano配置壓縮選項(xiàng)cssProcessorOptions:{ments:{removeAll:true}壓縮借助html-wck-ckPlugin({tle京東商城filename:"index.html",minify:{壓縮HTMLments:true,//移除HTML中的注釋collapseWhitespacetrue,刪除空白符與換行符minifyCSS:true//壓縮內(nèi)聯(lián)css}developmentvsProduction模式區(qū)分打npmnpminstallck-merge-案constconstmerge=constcommonConfig=require(" constdevConfig={}module.exports=}ck-dev-server--configck--confignpmnpmicross-env-"test":"cross-envNODE_ENV=testck-- 在wck.config.js里拿到參module.exports(env)=>{if(env&&returnreturn}}scripts:"--使用外部變量區(qū)分treewck2.x開始支持treeshaking概念，顧名思義，"搖樹"，清除無用css,js(DeadCode)DeadCode一般具有以下幾個(gè)特征代碼執(zhí)行的結(jié)果不會被代碼只會影響死變量（只寫不讀Jstreeshaking只支持ESmoduleCsstreenpmnpmiglob-allpurify-csspurifycss-ck--save-constPurifyCSS=require('purifycss-w constglob=require('glob-all')//清除無用csspaths:要做CSSTreeShakingpath.resolve(dirname'./src/*.html請注意，我們同樣需要對html文件進(jìn)行treeshakingpath.resolve(dirname,]JStreeexportconstadd=(a,b){returna+exportconstminus=(a,b){returna-import{add}from"./expo";add(1,2);optimization:usedExportstrue}只要mode是production就會生效，develpoment的treeshaking是不生效 可以查看打包后的代碼注釋以辨別是否生副作"sideEffects":false正常對所有模塊進(jìn)行treeshaking,僅生產(chǎn)模式或者在數(shù)組里面排除不需要treeshaking的模塊code打包完后，所有頁面只生成了一個(gè)代碼體積變大，不利于importimport_from其實(shí)codeSplitting概念與wck并沒有直接的關(guān)系，只不過wck中基于{splitChunks:chunks"all"所有的chunks代碼公共的部分分離出來成為一個(gè){splitChunks:chunks'async',//對同步initial，異步async3

minSize:30000,//最小尺寸，當(dāng)模塊大于30kbmaxSize0,//對模塊進(jìn)行二次分割時(shí)使用，不推薦使用minChunks:1,//打包生成的chunk文件最少有幾個(gè)chunk maxAsyncRequests:5,//最大異步請求數(shù)，默認(rèn)5maxInitialRequests:3,//最大初始化請求書， :cacheGroups緩存組vendors:{test:/[\\/]node_modules[\\/]/,name:"vendor"要緩存的分隔出來的chunk名稱priority:-10//緩存組優(yōu)先級數(shù)字越大，優(yōu)先級越高chunks"initial"必須三選一："initial"|all"|testreact|lodash/minChunks:{minChunks:priority:-:}}}}使用下面配置}}DllPlugin插件打包第類庫優(yōu)化構(gòu)建性Dll動態(tài).dll文件稱為動態(tài)庫，在windows系統(tǒng)會經(jīng)?？吹桨倏? 項(xiàng)目中引入了很多第庫，這些庫在很長的一段時(shí)間內(nèi)，基本不會更新，打包的時(shí)候分開打包來提升打包速度，而DllPlugin動態(tài)庫插件，其原理就是把網(wǎng)頁依賴的基礎(chǔ)模塊出來打包到dll文件中，當(dāng)需要導(dǎo)入的模塊存在于某個(gè)dl中時(shí)，這個(gè)模塊不再被打包，而是去dll中獲取。動態(tài)庫只需要被編譯一次，項(xiàng)目中用到的第模塊，很穩(wěn)定，如at,a-om，只要沒有升級的需求wck已經(jīng)內(nèi)置了對動態(tài)庫的支DllPlugin:用于打包出一個(gè)個(gè)單獨(dú)的動態(tài)庫文件 新建wck.dll.config.js文件，打包基礎(chǔ)模 中使用了第庫 constconstpath=require("path");const{DllPlugin}=require("wmodule.exports={entry:react:["react","react-dom"]//!output:path:path.resolve(dirname,"./dll"),filename:"[name].dll.js",library:plugins:newmanifest.jsonpathpath:path.join(dirname,"./dll","[name]-name:]"dev:dll":"dev:dll":ck--config運(yùn)npmnpmrunl文件包含了大量模塊的代碼，這些模塊被存放在一個(gè)數(shù)組里。用數(shù)組的索引號為ID,通過變量講自己暴露在全局中，就可以在windxx到其中的模塊Manifest.json描述了與其對應(yīng)的dll.js包含了哪些模塊，以及ID和路徑要給web項(xiàng)目構(gòu)建介入動態(tài)庫，需要完成以下事情將網(wǎng)頁依賴的基礎(chǔ)模塊，打包到單獨(dú)的動態(tài)庫，一個(gè)動態(tài)當(dāng)需要導(dǎo)入的模塊存在于某個(gè)動態(tài)庫中時(shí)，不要再次打包，直接用構(gòu)建好的動態(tài)庫即可。newmanifest:require("./dll/react-頁面依賴的所有動態(tài)庫都需要被加載<!DOCTYPE<html<metacharset="UTF-8"<metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp- patible" <linkhref="css/main_e2bf39.css"<div<scripttype="text/javascript"<scripttype="text/javascript"npmiadd-asset-html-npmiadd-asset-html-dll.jsindex.html中.wck.base.config.js文件中進(jìn)行更改

，它newnewfilepath:path.resolve(dirname,'../dll/react.dll.js')對應(yīng)的dll運(yùn)行npmnpmrun使用happypack并發(fā)執(zhí)行任運(yùn)行在Node.之上的Wck是單線程模型的，也就是說Wck需要一個(gè)一個(gè)地處理任務(wù)，不能同時(shí)處理多個(gè)任務(wù)。HappyPack就能讓W(xué)ck做npmnpmi-DvarhappyThreadPool=HappyPack.ThreadPool({size:5//rules:{test:/\.jsx?$/,use:[{一個(gè)loader對應(yīng)一個(gè)loader:}]{test:include:path.resolve(dirname,"./src"),use:["happypack/loader?id=css"]]new////如何處理.js文件，用法和Loader配置中一樣threadPool:happyThreadPool,HappyPack({id:"css",loaders:["style-loader","css- x",list:"./src/list",}ckPlugins({template:path.join(dirname,"./src/index/index.html"),使用glob.sync第庫來匹配路npmnpmiglob-constglob=constsetMPA=(){constentry=const ckPlugins={entrconst{entry,ckPlugins}=constconstsetMPA=(){constentry=const ckPlugins=constentryFiles=glob.sync(path.join(dirname,entryFiles.map((item,index){constentryFile=constmatch=entryFile.match(/src\/(.*)\/index\.js$/);constpageName=match&&match[1];entry[pageName]=entryFile; ckPlugin({title:pageName,template:path.join(inject:true{entr const{entry,ckPlugins}=module.exports{entry,path:path.resolve(dirname,"./dist"),filename:"[name].js"}plugins:// ]}文件刻告訴者，先緩存起來wck開啟模式，有兩1.1.啟動ck命令式帶上--watch參數(shù)，啟 }ck--2.在配置文件里設(shè)置watchtrue//默認(rèn)false,watchOptions:{ ignored: aggregateTimeout:300,poll:1000}如何自己編寫一個(gè)自己編寫一個(gè)Loader的過程是比較簡單Loader就是一個(gè)函數(shù) 式函數(shù)，不能用箭頭函拿到源代碼，作進(jìn)一步的修飾處理，再返回處理后的源碼就可以了文檔： 創(chuàng)建一個(gè)替換源碼中字符串的omodule.exports={console.log(source,this.query);return 在配置文件中使用constpath=require('path')module:{rules:{test:use:path.resolve(dirname,}]module:rules:{use:[{loader:path.resolve(dirname,name:開課}}]}]//const//constloaderUtils=require("loader-module.exports=function(source)//returnsource.replace("kkb",);constoptions=loaderUtils.getOptions(this);constresult=source.replace("kkb",);returnsource.replace("kkb",}this.callback:如何返回多個(gè)信息，不止是處理好的源碼呢，可以使用constloaderUtilsrequire("loader- module.exports=function(source)constoptions=loaderUtils.getOptions(this);constresult=source.replace("kkb",);this.callback(null,result);:Error|content:string|Buffer,sourceMap?:SourceMap,meta?:anyconstconstloaderUtils=require("loader-module.exports=function(source)constoptions=loaderUtils.getOptions(this);setTimeout(()=>{constresult=source.replace("kkb",return},我們使 constconstloaderUtils=require("loader-module.exports=function(source)constoptions=//callback就是this.callbackconstcallback=this.async();setTimeout(()=>{constresult=source.replace("kkb",);callback(null,result);},多個(gè)loader的使 注意順module.exports=returnsource.replace("開課吧",constloaderUtils=require("loader-utils");module.exports=function(source){constoptions= constcallback=this.async();setTimeout(()=>{constresult=source.repl