wck性能優優化要發布到線上的代碼，減少用戶能感知到的加載時間提升代碼性能，性能好，執行就快縮小文件范圍優化loadertestincludeexclude三個配置縮小loader的處理范圍include:include:path.resolve(dirname,優化resolve.modules配resolve.modules用于配置wck去哪 下尋找第模塊，默認是尋找第模塊，默認是在當前項 下的node_modules里面去找，如果沒有找到，就會去上一../noe_oules找，再沒有會去o_ous中找，以此類推，和Noe.js的模塊尋找機制很類似。如果我們的第模塊都安裝在了項目 下，就可以直接指明這個路徑modules:[path.resolve(dirname,}}優化resolve.alias配esolve.lias配置通過別名來將原導入路徑映射成一個新的導入路徑拿ect為例，我們引入的ect庫，一般存在兩套代碼

采用commonJS規范的模已經打包好的完整代碼，沒有采用模塊化，可以直接執行默認情況下，wck會從文件.noe_oein/ect/indx開始遞歸解析和處理依賴的文件。我們可以直接指定文件，避免這處的耗時。aliasalias:"@":path.join(dirname,"./pages"),react:path.resolve("react-dom":)}優化resolve.extensions配eolve.xtenions在導入語句沒帶文件后綴時，ck會自動帶上后綴后，去嘗試查找文件是否存在。導入語句盡量導入語句盡量的帶上后綴使用externals優化cdn//公司有//靜態資源有部署到cdn有//使用我的bundle文件里，就不用打包進去這個依賴了，體積會我們可以將一些JS文件在

上(減少 體積)， 中通<!<!DOCTYPE<html<metacharset="UTF-<metaname="viewport"content="width=device-width,initial-<metahttp- patible" <div<script w我們希望在使用時，仍然可以通過 的方式去(如import$from'jquery')，并且希望不會對其進行打包，此時就可以配置externals。wmodule.exports=externals:{//jquery通過script引入之后，全局中即有了jQuery變量'jquery':'jQuery'}}DN通過將資源部署到世界各地，使得用戶可以就近資源，加快速度。要接入CDN，需要把網頁的靜態資源上傳到CDN服務上，在這些資源時，使用CDN服務提供的URL。publicPath:}',//指定存放JS文件的CDN地確保靜態資源文件的上傳與否css文件的使用less或者sass當做css$$npminstalllessless-loader--save-{test:use:["style-loader","css-loader","less-}使用postcss為樣式自動補齊瀏覽? npmnpmipostcss-loaderautoprefixer-modulemodule.exports{plugins:[overrideBrowserslist:["last2versions",]body{div y:flex;border:1pxredsolid;}}{test:include:path.resolve(dirname,"./src"),use:[{loader:"css-loader",options:{}]如果不做抽取配置，我們的css是直接打包進js里面的，我們希望能單獨生成css文件。因為單獨生成css,css可以和js并行，提高頁面加載效率借助 tractPlugin完成npmnpminstallmini-css-extract-plugin-const tractPlugin=require("mini-css-extract-{test:/\.scss$/,use:[//"style-loader",//不再需要style-loader，用 代 "css-loader""css-loader"編譯css"sass-loader"編譯]plugins:new filename:"css/[name]_[contenthash:6].css",chunkFilename:"[id].css"]壓縮借助optimize-css-assets-wck-借助####安npminstallcssnano-npmioptimize-css-assets- ck-plugin-constOptimizeCSSAssetsPlugin=require("optimize-css-assets-newcssProcessorrequire("cssnano"http://引入cssnanocssProcessorOptions:ments:{removeAll:true}壓縮借助html-wck-ckPlugin({tle:"京東商城 te:"./index.html",filename:"index.html",minify:{壓縮HTMLments:true,//移除HTML中的注釋collapseWhitespacetrue刪除空白符與換行符minifyCSS:true//壓縮內聯css}npminstallnpminstallck-merge-案constconstmerge=constcommonConfig=require(" constdevConfig={}module.exports= ck-dev-server--config ck--config }基于環境變量區分借助cross-npmnpmicross-env-package里面配置命令，傳入參"test":"cross-envNODE_ENV=testck--config在wck.con?g.js里拿到參module.exports=(env)=>{if(env&&duction){returnreturn}}scripts:"--treewck2.x開始支持treeshaking概念，顧名思義，"搖樹"，清除無用css,js(DeadDeadCode一般具有以下幾個特征代碼只會影響死變量（只寫不讀Jstreeshaking只支持ESmoduleCsstreenpmnpmiglob-allpurify-csspurifycss-ck--save-constPurifyCSS=require('purifycss-w constglob=require('glob-all')清除無用cssPurifyCSS({//要做CSSTreeShaking的路徑文path.resolve(dirname'./src/*.html'請注意，我們同樣需要對html文件進行treeshakingpath.resolve(dirname,JStreeexportconstadd=exportconstadd=(a,b){returna+exportconstminus=(a,b)=>{returna-b;import{add}fromadd(1,optimization:usedExports:true//哪些導出的模塊被使用了，再做打}只要mode是pdo就會生效，dpmet的eeshkg是不生效的，因為wk為了方便你的調試可以查看打包后的代碼注釋以辨別是否生效//正常對所有模塊進行tree,僅生產模式有效，需要或者在數組里面排除不需要treeshaking代碼分割code單頁面應用打包完后，所有頁面只生成了一個沒有合理利用瀏覽?資源多頁面應用如果多個頁面引入了一些公共模塊，那么可以把這些公共的模塊出來，單獨打包。公共代碼只需要一次就緩存起來了，避免了重復。importimport_from假如我們引入一個 的工具庫，體積為1mb，而我們的業務邏輯代碼也有1mb，那么打包出來的體積小會在 其實codeSplitting概念與wck并沒有直接的關系，只不過wck中提供了一種更加方便的方法基于{splitChunks:chunks:"all",//所有的chunks代碼公共的部分分離出來成為一{splitChunks:chunks:'async',//對同步initial，異步async，所有的模塊有效allminSize:30000,//最小尺寸，當模塊大于30kbmaxSize:0,//對模塊進行二次分割時使用，不推薦minChunks:1,//打包生成的chunk文件最少有幾個chunk了這個模塊maxAsyncRequests:5,//最大異步請求數，默認5maxInitialRequests:ameDelimiter打包分割符nametrue,//打包后的名稱，除了布爾值，還可以接收一個函數functioncacheGroups:{//緩存組vendors:test:/[\\/]node_modules[\\/]/,name:"vendor"要緩存的分隔出來的chunk名稱priority:-10//緩存組優先級數字越大，優先級越高

chunks:"initial必須三選一："initial"|"all"|"async"(默認test:/react|lodash正則規則驗證，如果符合就提取chunk,minSizeminSize:minChunks:{minChunks:priority:-reuseExistingChunk:true//可設置是否重用該}}}}}}Scope作用域提升（ScopeHoisting）是指wck通過ES6語法的靜態分析，分析出模塊之間的依賴關exportdefault o,//importstrfrom 打包后 通過配置optimization.concatenateModules=true`：開啟Scope////module.exports={{concatenateModules:}我們發現o.js內容和index.js的內容合并在一起了！所以通過ScopeHoisting的功能可以W 打包出來的代碼文件更小、運行的更快speed-measure-wck-plugin:可以測量各個插件和loader所花費的時npmnpmispeed-measure-ck-plugin-constSpeedMeasurePlugin=require("speed-measure-constsmp=newconstconfig= }module.exports=wck-bundle-yzer:分析wck打包后的模塊依賴關系npmnpminstallyzer-constyzerPlugin= module.exports=merge(baseW ckConfig,{new ]啟動wck構建，會默認打開一個窗DllPlugin插件打包第類 優化構建性Dll動態庫其實就是做緩.dll文件稱為動態庫，在windows系統會經常看到百科 項目中引入了很多第庫，這些庫在很長的一段時間內，基本不會更新，打包的時候分開打包來提升打包速度，而DllPlugin動態庫插件，其原理就是把網頁依賴的基礎模塊出來打包到dll文件中，當需要導入的模塊存在于某個dll中時，這個模塊不再被打包，而是去dll中獲取。動態庫只需要被編譯一次，項目中用到的第模塊，很穩定，例如ect,ectom，只要沒有升級的需求wck已經內置了對動態庫的支 用于在主要的配置文件中引入DllPlugin插件打包好的動態庫文件新建wck.dll.con?g.js文件，打包基礎模我們在index.js中使用了第庫react、react-dom，接下來，我們先對這兩個庫先進行打包constconstpath=require("path");const{DllPlugin}=require("wmodule.exports={mode:entry:react:["react","react-dom"]//!output:path:path.resolve(dirname,"./dll"),filename:"[name].dll.js",library:plugins:new//manifest.json文件的輸出位path:path.join(dirname,"./dll","[name]-//定義打包的公共vendor文件對外暴露的函數name:]在package.json"dev:dll":"dev:dll":ck--config運npmnpmrun你會發現多了一個dll文件夾，里邊有dll.js文件，這樣我們就把我們的Reactll文件包含了大量模塊的代碼，這些模塊被存放在一個數組里。用數組的索引號為,通過變量講自己暴露在全局中，就可以在wndxxx到其中的模塊 描述了與其對應的dll.js包含了哪些模塊，以及ID接下來怎么使用呢？要給web項目構建介入動態庫，需要完成以下事情將網頁依賴的基礎模塊，打包到單獨的動態庫，一個動態庫是可以包含多個模塊的當需要導入的模塊存在于某個動態庫中時，不要再次打包，直接使用構建好的動態庫即可。newmanifest:path.resolve(dirname,"./dll/react-頁面依賴的所有動態庫都需要被加載<!DOCTYPE<!DOCTYPE<html<metacharset="UTF-8"<metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp- patible"content="ie=edge" <linkhref="css/main_e2bf39.css"<div<scripttype="text/javascript"<scripttype="text/javascript"手動添加使用，體驗不好，這里推薦使用add-asset-html-wck-plugin插件幫助我們做這個事情安裝一個依賴npmiadd-asset-html-w ck-plugin，它會將我們打包后的dll.js文件注入到我們生成的index.html中.在wck.base.con?g.js文件中進行更改。newnewfilepath:path.resolve(dirname,'../dll/react.dll.js')//對應的dll運行npmnpmrun這個理解起來不費勁