Webpack構(gòu)建速度優(yōu)化基本優(yōu)化完畢，接下來考慮的就是：線上代碼質(zhì)量的優(yōu)化，即如何使用webpack構(gòu)建出高質(zhì)量的代碼

Webpack構(gòu)建流程：初始化配置參數(shù) -> 綁定事件鉤子回調(diào) -> 確定Entry逐一遍歷 -> 使用loader編譯文件 -> 輸出文件

提綱

本次優(yōu)化構(gòu)建代碼質(zhì)量基本技術(shù)：

（生產(chǎn)環(huán)境代碼構(gòu)建）為實(shí)時(shí)查看每次配置后代碼構(gòu)建情況，使用Webpack監(jiān)聽文件避免每次手動build，并且開啟webpack-jarvis，實(shí)時(shí)查看構(gòu)建分析，npm i -D webpack-jarvis。

開啟監(jiān)聽模式

watch: true,watchOptions: {  ignored: /node_modules/, // 忽略監(jiān)聽文件  aggregateTimeout: 300, //文件變動后多久發(fā)起構(gòu)建  poll: 1000, //每秒詢問次數(shù)，越小越好}

一、react-router4實(shí)現(xiàn)按需加載

單頁應(yīng)用按需加載一般原則：

將網(wǎng)站劃分成一個(gè)個(gè)小功能，在按照每個(gè)功能的相關(guān)度將他們分成幾個(gè)類； 將沒一個(gè)類合并成一個(gè)chunk，按需加載對應(yīng)的代碼； 不可將用戶首次進(jìn)入網(wǎng)站時(shí)需要看到畫面的對應(yīng)功能Chunk按需加載；

被分割出去的代碼的加載需要一定的觸發(fā)時(shí)機(jī)，即當(dāng)用戶操作了或者即將操作對應(yīng)功能時(shí)再去加載對應(yīng)的代碼（默認(rèn)使用react-router按需加載的觸發(fā)條件是路由的變化）

實(shí)現(xiàn)條件：

使用插件：npm i react-loadable;

配合bable插件npm i @babel/plugin-syntax-dynamic-import;

代碼示例：

// .bablerc{ "plugins": ["@babel/plugin-syntax-dynamic-import"]}// 示例代碼Loadable({ loader: () => import('./component'), //按需加載組件 loading: Loading, //處理組件加載的loading、error等 delay: 300 //延遲加載避免loading的閃爍問題});// Loading組件自定義// 接受三個(gè)props，其中pastDelay：等待時(shí)觸發(fā)；timedOut：超時(shí)時(shí)觸發(fā)超過delay；error：出錯(cuò)觸發(fā)默認(rèn)為200msconst Loading = ({ pastDelay, timedOut, error }) => {  if (pastDelay) {   return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin>  } else if (timedOut) {   return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin>  } else if (error) {   return <div>Error!</div>;  }  return null;};

二、提取公共代碼webpack.optimization

optimization: {  splitChunks: {   chunks: "all",   cacheGroups: {    vendors: {       test: /node_modules/,      name: 'vendors',       minSize: 0,      minChunks: 1,       chunks: 'initial',      priority: 2 // 該配置項(xiàng)是設(shè)置處理的優(yōu)先級，數(shù)值越大越優(yōu)先處理     },    commons: {     name: "comomns",     test: resolve("src/components"), // 可自定義拓展規(guī)則     minChunks: 2, // 最小共用次數(shù)     minSize:0,  //代碼最小多大，進(jìn)行抽離     priority: 1, //該配置項(xiàng)是設(shè)置處理的優(yōu)先級，數(shù)值越大越優(yōu)先處理     }  }}