Webpack 最佳實踐總結二

這一篇主要講 webpack 的改進快取(hash)、切割**

webpackmanifestplugin相比htmlwebpackplugin是乙個更靈活的解決方案，尤其是面對複雜的服務端的部分。它能生成json檔案，包含檔名以及與其對應(對映)的 hash 過的檔名

去代替webpack的原生的hash函式演算法。更多關於 webpack hash 的問題可以檢視：here

module.exports = , output: , plugins: [ // 生成打包資源列表 json 檔案 new webpackmanifestplugin(), // 取代 webpack 原生的 hash 函式 new webpackchunkhash(), // 生成依賴包的塊檔案，轉移所有的`node_modules`依賴到乙個特別的該檔案中 // 這允許你更新你的**時，無需更新依賴 new webpack.optimize.commonschunkplugin(), // 生成 `webpack』s runtime` 自身的**檔案 // 這允許你更新你的**時，無需更新其他無關** new webpack.optimize.commonschunkplugin(), // 標識每個模組 hash 值，當你新增新的模組時，如果該模組的依賴影響到別的模組 // 就可以更新這些受影響的模組從而區分舊的模組 new webpack.hashedmoduleidsplugin(), // 生成資源對映檔案，包含檔名以及與其對應的hash過的檔名，用於其他外掛程式或者服務 new chunkmanifestplugin()

]};

上面這個配置將會生成6個檔案:

// 兩個打包入口文檔案，當你修改了業務**，它們也會跟著變化 homepage.a68cd93e1a43281ecaf0.js article.d07a1a5e55dbd86d572b.js // 通用依賴檔案與 webpack』s runtime 的檔案，前者當你依賴包變化也跟著變化，後者極少變化，除非使用的 webpack 版本這類情況變化了才會跟著變化 vendor.1ebfd76d9dbc95deaed0.js runtime.d41d8cd98f00b204e980.js // 兩個 manifest 檔案，用於其他外掛程式或服務，如 dllreferenceplugin manifest.json

chunk-manifest.json

除了按照不同頁面的切割為不同的入口檔案外的切割**外，還可以按照構成頁面的元件的順序做到按需載入的去切割**

想象一下，有乙個頁面布局方式如下所所示：

+-------------------------------+
| logo                    menu  |
+-------+----------------+------+
|       |                |      |
| left  |                | right|
| bar   |                | bar  |
|       |    article     |      |
|       |    content     |      |
|       |                |      |
|       |                |      |
|       +----------------+      |
|       |                |      |
|       |    comments    |      |
|       |                |      |
+-------+----------------+------+
+-------------------------------+

// article-page.js
import  from './components/article';
import  from './components/comments';
import  from './components/sidebar';
renderarticle();
rendercomments();
rendersidebar();

做到按需載入則需要你將靜態的import修改為動態的import()，webpack 會自帶轉移這些**到單獨的塊中，只有當被需要時才會載入，如下：

// article-page.js
import  from './components/article';
renderarticle();
import('./comments.js')
.then((module) => );
import('./sidebar.js')
.then((module) => );

將靜態的import修改為動態的import()的操作會帶來提公升首次訪問時載入效能，同事也會優化快取，當你更改這些業務**時，只會修改對應的塊檔案，從而不影響其他塊檔案

當然，還需要重新設定 output ，如下：

// webpack.config.js
module.exports = 
};

output.chunkfilename可以標識按需載入的塊檔案

外掛程式在乙個大型專案中，如果有兩段業務**有共同的依賴，通過 webpack 的externals，你在兩段**間可以共享這些依賴，如下：

// webpack.config.js
module.exports = 
};

上面的做法是將這些框架或庫的物件掛靠在全域性物件中，然後通過另外乙個物件儲存物件名以及對映到對應模組名的變數，webpack 就會替換所有所有模組下的相關的引用，然後你需要手動引入這些被externals的框架或庫到**入口檔案中，如htmlwebpackplugin定義的template檔案

這次介紹如何通過 webpack 克服瀏覽器快取打包檔案，不去更新新的打包檔案的問題，以及講解了從不同的頁面的角度去切割**和從不同的頁面組成部分去切割**的過程，還有通過externals去分離去共有的框架和庫，從而實現對這些框架或庫的cdn資源載入

內容較多，大概就這樣~

文章首發於：

Webpack 最佳實踐總結二

js 最佳實踐總結

最佳實踐《自我總結》

最佳實踐 Flutter 最佳實踐

Webpack 最佳實踐總結 二

js 最佳實踐總結

最佳實踐《自我總結》

最佳實踐 Flutter 最佳實踐

相關推薦

Webpack 最佳實踐總結二