構建多頁面應用——優化(二)

最近，一直嘗試使用webpack作多頁面應用的開發。而且一個實際的項目爲原型，實現對一個靜態的企業站進行優化。原站點地址，測試站點地址。

若是想要作一個本身個我的博客，或者企業官網來講，有必定的參考意義。

webpack的resolve.alias

在作模塊化開發的過程當中，有一個須要解決的問題就是引用模塊的路徑問題。

注：在webpack中，每個文件（不論是js，css, html，仍是圖片等）都被稱之爲一個塊。

爲了實現模塊化，細粒度化的控制，每每會將代碼塊分紅爲不可分割的塊，這樣作雖然方便了管理控制，可是也會形成項目的文件嵌套很嚴重，再飲用的時候須要格外當心路徑，同時也會形成開發者的負擔（拋開其餘不講，但從技術角度來講，對於開發人員來講，能用一行代碼解決的問題，毫不用兩行，能少輸入一個單詞就少輸入一個）。

而webpack的resolve.alias能夠爲指定路徑的字符串起別名。在本文所使用的示例，這樣定義別名：

...
resolve: {
  alias: {
    '@': path.join(__dirname, '..', 'pages/'), // 根目錄
    '@css': path.join(__dirname, 'assets/css/'), // css
    '@img': path.join(__dirname, 'assets/imgs/'), // picture
    // '@font': path.join(__dirname, 'assets/fonts/'),
    '@data': path.join(__dirname, 'pages/data/'), // mock data
    '@utils': path.join(__dirname, 'pages/utils/') // snippets code
  }
},
...

固然，上面的別名並非萬能的，有一個問題就是background-iamge 和 font-face 的使用url()會有一些問題，url()中的路徑必須是字符串，暫時沒有好的辦法解決。

可是使用sass，能夠定義變量，能夠經過變量來指定路徑，可是要嚴格控制引用變量模塊的文件的目錄，在本文所使用的示例中，統一將應用變量文件assets/css/path.scss的文件，控制在兩個層級。具體可參考所提供源代碼中的具體使用。

模擬數據

實際的項目沒有使用任何一種語言的後端代碼，更不用說數據庫。所有使用的是模擬數據。

爲了方便管理維護項目的模擬數據，將項目的全部數據統一整理到了示例的pages/data目錄下。

靜態資源圖片的處理

第一優化的時候，就簡單的講了下，如何使用imagemin提供的插件，來實現對常見類型（.jpg，.png，*.gif）圖片的處理。

第一種引用圖片的方案

以前作單頁面應用開發的時候，喜歡將全部的圖片優化處理後統一放在一個目錄中，而後將它們放在服務器中，最後在開發或生產環境中，使用絕對路徑進行訪問。

這種方式的好處是不用擔憂相對路徑形成的路徑問題。可是缺點是，操做起來不方便，尤爲是開發環境。由於你不知道項目究竟要使用多少的靜態資源，尤爲是使用哪一種靜態資源。

這種方式在團隊合做的項目中，比較常見，可是對於提高團隊的效率並不明顯。

第二種引用圖片的方案

因此，對於開發者來講，若是若是須要什麼靜態資源，就放在本身的本地目錄，這樣能夠爲所欲爲的添加。

在本文所採用的示例中，我作了一些嘗試，將全部的圖片資源進行了分類。須要轉化爲base64的圖片放一個文件夾assets/imgs/base64/，須要合成雪碧圖的單獨放在一個文件夾；assets/imgs/sprites/，爲了方便管理合成不一樣雪碧圖的源圖片，我又在該目錄下建立了子文件夾；而對於<img src="..." />要引用的圖片的存放使用了兩個文件夾，assets/imgs/static存放了未經優化的全部的圖片，而目錄assets/imgs/others，存放了全部優化過的圖片（包含兩部分，一部分是使用npm run img命令優化的assets/imgs/static目錄下的圖片，另外一部分是npm run dev命令優化的雪碧圖圖片，它的前綴帶有*-sprite這樣的後綴）。

這種方案，使用的是相對路徑應用圖片。可參考pages/data/contactus.js文件的代碼：

const loadImg = require('@utils/load-img')

module.exports = {
  cn_name: '聯繫咱們',
  en_name: 'CONTACT US',
  img: loadImg('second/contactus-tag.png'),
  ...
}

而工具代碼片斷loadImg的代碼以下：

module.exports = function(str) {
  return require('@img/other/' + str)
}

源代碼

webpack4.x multi-page

構建多頁面應用系列文章

• 構建多頁面應用
• 構建多頁面應用——單個頁面的處理
• 構建多頁面應用——模板
• 構建多頁面應用——靜態資源
• 構建多頁面應用——優化（一）
• 構建多頁面應用——hash
• 構建多頁面應用——優化（二）