第五章webpack工程化3節(jié)構(gòu)建優(yōu)化-day

Wck-wck性能優(yōu)wck性能優(yōu)優(yōu)化開發(fā)體優(yōu)化輸出質(zhì)縮小文件范優(yōu)化loader配testincludeexclude三個(gè)配置縮小loader的處理范圍include:path.resolve(dirname,優(yōu)化resolve.modules配resolve.modules用于配置 ck去哪 下尋找 模塊，默認(rèn) 去../../node_modules中找，以此類推，和Node.js的模塊尋找機(jī)制很類似。 modules:[path.resolve(dirname,}}優(yōu)化resolve.alias配rslveais拿reatra采用commonJS規(guī)范的模已經(jīng)打包好的完整代碼，沒有采用模塊化，可以直接執(zhí)行默認(rèn)情況下，wck會(huì)從文件.node_modulesbin/eat/index開始遞歸解析和處理依賴的文件。我們可以直接指定文件，避免這處的耗時(shí)。alias:alias:"@":path.join(dirname,"./pages"),react:path.resolve("react-dom":path.resolve()}優(yōu)化resolve.extensions配rslveextss在導(dǎo)入語句沒帶文后綴時(shí)，wk會(huì)自動(dòng)帶上后綴后，去嘗試查找文件是否存在。默認(rèn)后綴嘗試列表 使用靜態(tài)資源路徑N通過將資源部署到世界各地，使得用戶可以就近資源，加快速度。要接入CDN，需要把網(wǎng)頁(yè)的靜態(tài)資源上傳到CN服務(wù)上，在這些資源時(shí)，使用CDN服務(wù)提供的URL。publicPatch:publicPatch:}指定存放JS文件的CDNcss文件的處使用less或者sass當(dāng)做css技術(shù)$$npminstalllessless-loader--save-{test:use:["style-loader","css-loader","less-}使用postcss為樣式自動(dòng)補(bǔ)齊瀏覽?前 npmnpmipostcss-loaderautoprefixer-module.exports={[overrideBrowserslist:["last2versions",]body{div y:flex;border:1pxredsolid;}} {test:include:path.resolve(dirname,"./src"),use:[{options:{}]獨(dú)生成css文件。因?yàn)閱为?dú)生成css,css可以和js并行，提高頁(yè)面加載借助MiniCstractPlugin完成npmnpminstallmini-css-extract-plugin-constconsttractPlugin=require("mini-css-{use:["style-loader不再需要style-loader "css-loader",//編譯css"sass-loader編譯]plugins:newchunkFilename:]壓縮借助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中的注釋collapseWhitespace:true,刪除空白符與換行符minifyCSS:true//壓縮內(nèi)聯(lián)css}developmentvsProduction模式區(qū)分打npmnpminstallck-merge-案constconstmerge=constcommonConfig=require(" constdevConfig={}module.exports=}ck-dev-server--configck--config借助cross-npmnpmicross-env-package里面配置命令，傳入?yún)?test":"cross-envNODE_ENV=testck-- 在在ck.config.js里拿到參module.exports=(env)=>{if(env&&duction){returnreturn}}scripts:"--作使用外部變量treewck2.x開始支持treeshaking概念，顧名思義，"搖樹"，清除無用css,js(DeadCode)DeadCode一般具有以下幾個(gè)特征代碼執(zhí)行的結(jié)果不會(huì)代碼只會(huì)影響死變量（只寫不讀Jstreeshaking只支持ESmodule的引入方式Csstreenpmnpmiglob-allpurify-csspurifycss-ck--save-constPurifyCSS=require('purifycss-w constglob=require('glob-all')//清除無用csspaths:要做CSSTreeShakingpath.resolve(dirname,'./src/*.html請(qǐng)注意，我們同樣需要對(duì)html文件進(jìn)行treeshakingpath.resolve(dirname,]JStree只支持imot方式引入，不支持omnsexportconstadd=(a,b){returna+exportconstminus=(a,b){returna-import{add}from"./expo";add(1,2);optimization:usedExports:true}只要mode是production就會(huì)生效，develpoment的treeshaking是不生效的，因?yàn)閣ck為了方便你的調(diào)試可以查看打包后的代碼注釋以辨別是否生效。生產(chǎn)模式不需要配置，默認(rèn)開啟副作"sideEffects":false//正常對(duì)所有模塊進(jìn)行tree或者在數(shù)組里面排除不需要treeshaking的模塊代碼分割codeimportimport_from 么打包出來的體積大小會(huì)在其實(shí)codeSplitting概念與wck并沒有直接的關(guān)系，只不過wck中基于{splitChunks:chunks:"all所有的chunks代碼公共的部分分離出來成為一個(gè){splitChunks:chunks:'async',//對(duì)同步initial，異步async3

minSize:30000,//最小尺寸，當(dāng)模塊大于30kbminChunks:1,//打包生成的chunk文件最少有幾個(gè)chunk maxAsyncRequests:5,//最大異步請(qǐng)求數(shù)，默認(rèn)5maxInitialRequests:3,//最大初始化請(qǐng)求書， :cacheGroups:緩存組vendors:{test:/[\\/]node_modules[\\/]/,name:"vendor要緩存的分隔出來的chunk名稱priority:-10//緩存組優(yōu)先級(jí)數(shù)字越大，優(yōu)先級(jí)越高chunks:"initial必須三選一："initial"|"all|test:/react|lodash

minChunks:{minChunks:priority:-:}}}}}}DllPlugin插件打包第類Dll動(dòng)態(tài)項(xiàng)目中引入了很多第庫(kù)，這些庫(kù)在很長(zhǎng)的一段時(shí)間內(nèi)，基本不會(huì)更新，打包的時(shí)候分開打包來提升打包速度，而DllPugin動(dòng)態(tài)庫(kù)插件，其原理就是把網(wǎng)頁(yè)依賴的基礎(chǔ)模塊出來打包到dll文件中，當(dāng)需要導(dǎo)入的模塊存在于某個(gè)dll中時(shí)，這個(gè)模塊不再被打包，而是去dllreact- 中使用了第庫(kù) react-新建wck.dll.config.js文*@descconstpath=const{DllPlugin}=require('w constNODE_ENV=module.exports{entry:["react","react-output:path:path.resolve(dirname,'..','dll'),filename:'react.dll.js',library:plugins:newmanifest.jsonpath:path.resolve(dirname,'dll/react-定義打包的公共vendorname:]}在package.json"build:dll":"build:dll":"cross-envNODE_ENV=developmentck-- 運(yùn)npmnpmrun你會(huì)發(fā)現(xiàn)多了一個(gè)dlds文件，這樣我們就把我們的qery這些已經(jīng)單獨(dú)打包了，接下來怎么使用呢？npmiadd-asset-html-ck-需要再安npmiadd-asset-html-ck-會(huì)將我們打包后的dll.js文件注入到我們生index.html中.wck.base.config.js文件中進(jìn)行更改new filepath:path.resolve(dirname,'../dll/react.dll.js對(duì)應(yīng)的dll文件路徑new manifest:path.resolve(dirname,'..','dll/react-使用happypack并發(fā)執(zhí)行任運(yùn)行在Node.之上的W 一個(gè)地處理任務(wù)，不能同時(shí)處理多個(gè)任務(wù)。HappyPack就能讓W(xué)