Wck-wck性能優優化開提升效優化輸提升代碼性能，性能好，執行就快縮小文testincludeexclude三個配置縮小loader的處理范圍include:include:path.resolve(dirname,優化resolve.modules配 尋找第模塊，默認是在當前項目 去../../node_modules中找，以此類推，和Node.js的模塊尋找機制很如果我們的第模塊都安裝在了項目根 modules:[path.resolve(dirname,}}優化resolve.alias配已經打包好的完整代碼，沒有采用模塊化，可以直默認情況下，wck會從文件///at/indx開時。aliasalias:"@":path.join(dirname,"./pages"),react:path.resolve(dirname,"react-dom":)}優化resolve.extensions配默認值后綴嘗試列表盡量 使用靜態資源路徑通過將資源部署到世界各地，使得用戶可以就近資源，加快速度。要接入N，需要把網頁的靜態資源上傳到N服在資源時，使用N服務提供的L。publicPatch:}指定存放JS文件的CDN確保靜態資源文件的上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配置壓縮選項cssProcessorOptions:{ments:{removeAll:true}壓縮借助html-wck-ckPlugin({tle京東商城filename:"index.html",minify:{壓縮HTMLments:true,//移除HTML中的注釋collapseWhitespacetrue,刪除空白符與換行符minifyCSS:true//壓縮內聯css}developmentvsProduction模式區分打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:"--使用外部變量區分treewck2.x開始支持treeshaking概念，顧名思義，"搖樹"，清除無用css,js(DeadCode)DeadCode一般具有以下幾個特征代碼執行的結果不會被代碼只會影響死變量（只寫不讀Jstreeshaking只支持ESmoduleCsstreenpmnpmiglob-allpurify-csspurifycss-ck--save-constPurifyCSS=require('purifycss-w constglob=require('glob-all')//清除無用csspaths:要做CSSTreeShakingpath.resolve(dirname'./src/*.html請注意，我們同樣需要對html文件進行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正常對所有模塊進行treeshaking,僅生產模式或者在數組里面排除不需要treeshaking的模塊code打包完后，所有頁面只生成了一個代碼體積變大，不利于importimport_from其實codeSplitting概念與wck并沒有直接的關系，只不過wck中基于{splitChunks:chunks"all"所有的chunks代碼公共的部分分離出來成為一個{splitChunks:chunks'async',//對同步initial，異步async3

minSize:30000,//最小尺寸，當模塊大于30kbmaxSize0,//對模塊進行二次分割時使用，不推薦使用minChunks:1,//打包生成的chunk文件最少有幾個chunk maxAsyncRequests:5,//最大異步請求數，默認5maxInitialRequests:3,//最大初始化請求書， :cacheGroups緩存組vendors:{test:/[\\/]node_modules[\\/]/,name:"vendor"要緩存的分隔出來的chunk名稱priority:-10//緩存組優先級數字越大，優先級越高chunks"initial"必須三選一："initial"|all"|testreact|lodash/minChunks:{minChunks:priority:-:}}}}使用下面配置}}DllPlugin插件打包第類庫優化構建性Dll動態.dll文件稱為動態庫，在windows系統會經常看到百科 項目中引入了很多第庫，這些庫在很長的一段時間內，基本不會更新，打包的時候分開打包來提升打包速度，而DllPlugin動態庫插件，其原理就是把網頁依賴的基礎模塊出來打包到dll文件中，當需要導入的模塊存在于某個dl中時，這個模塊不再被打包，而是去dll中獲取。動態庫只需要被編譯一次，項目中用到的第模塊，很穩定，如at,a-om，只要沒有升級的需求wck已經內置了對動態庫的支DllPlugin:用于打包出一個個單獨的動態庫文件 新建wck.dll.config.js文件，打包基礎模 中使用了第庫 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運npmnpmrunl文件包含了大量模塊的代碼，這些模塊被存放在一個數組里。用數組的索引號為ID,通過變量講自己暴露在全局中，就可以在windxx到其中的模塊Manifest.json描述了與其對應的dll.js包含了哪些模塊，以及ID和路徑要給web項目構建介入動態庫，需要完成以下事情將網頁依賴的基礎模塊，打包到單獨的動態庫，一個動態當需要導入的模塊存在于某個動態庫中時，不要再次打包，直接用構建好的動態庫即可。newmanifest:require("./dll/react-頁面依賴的所有動態庫都需要被加載<!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文件中進行更改

，它newnewfilepath:path.resolve(dirname,'../dll/react.dll.js')對應的dll運行npmnpmrun使用happypack并發執行任運行在Node.之上的Wck是單線程模型的，也就是說Wck需要一個一個地處理任務，不能同時處理多個任務。HappyPack就能讓Wck做npmnpmi-DvarhappyThreadPool=HappyPack.ThreadPool({size:5//rules:{test:/\.jsx?$/,use:[{一個loader對應一個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參數，啟 }ck--2.在配置文件里設置watchtrue//默認false,watchOptions:{ ignored: aggregateTimeout:300,poll:1000}如何自己編寫一個自己編寫一個Loader的過程是比較簡單Loader就是一個函數 式函數，不能用箭頭函拿到源代碼，作進一步的修飾處理，再返回處理后的源碼就可以了文檔： 創建一個替換源碼中字符串的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:如何返回多個信息，不止是處理好的源碼呢，可以使用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);},多個loader的使 注意順module.exports=returnsource.replace("開課吧",constloaderUtils=require("loader-utils");module.exports=function(source){constoptions= constcallback=this.async();setTimeout(()=>{constresult=source.repl