動態構建的多頁面vue-cli模版

easonxie發表於2018-05-27
Vue

vue官方提供了幾個vue cli的模版，但都單頁面模版，然而在真實的業務場景下還是有多頁面模版的需求，百度和google上都能搜尋到不少單頁面模版改多頁面模版的文章，但是沒有現成的模版可以直接用，而且多頁面模版頁面多了之後，首次構建的速度真的很慢，無法忍受。這裡我fork了官方的單頁面webpack模版，並做了動態構建的優化。

一、如何使用

//預設全域性安裝vue-cli
vue init xyc-cn/webpack yourProject
cd yourProject
npm run dev
複製程式碼

訪問 http://localhost:8088/pages/module/index.html 會看到熟悉的官方帶v-router的webpack模版頁面

訪問 http://localhost:8088/pages/module/detail.html 是我寫的一個示例簡單頁面

二、多頁面構建原理

多頁面構建的原理並不複雜。大概流程是這樣如下

  1. 指定一個命名規則的檔案做為入口檔案(例如v_entry.js)
  2. 遍歷src目錄，搜尋檔案入口(搜尋全部的v_entry.js檔案，生成一個webpack entry物件)
    動態構建的多頁面vue-cli模版
  3. 每個入口檔案新建一個htmlPlugin生成html,並且把這個入口資料夾註入到html裡面

三、頁面數量膨脹後構建速度慢

隨著業務的發展，專案會無限地膨脹，開發構建速度慢的問題會越來越嚴重，博主的專案有幾十個頁面，每個npm run dev都到等待幾十秒時間。會讓人很抓狂。理想的情況是，npm run dev的時候，只構建一個頁面，每次訪問到新頁面的時候，再重新構建這個新頁面的內容。這個時候express中介軟體webpack-dev-middleware派上用場了，通過它我們可以實現上述的理想構建方案。流程是這樣的：

  1. 修改上面圖片那個入口檔案json，只取第一個key value。(這樣首次構建就只會構建這個entry)
 //first run only build one entry js buddle
  let keyList = Object.keys(devConfig.entry), newEntry = {}
  keyList.forEach(function (v, i) {
    if (i === 0) {
      newEntry[v] = [devConfig.entry[v], 'webpack-hot-middleware/client']
    }
  });
  devConfig.entry = newEntry;
複製程式碼
  1. 新增一個express中介軟體，每當有html請求過來，就判斷下這個請求有沒對應的entry，有就執行第三步，沒有就返回錯誤。
  2. 呼叫webpack內建的entryPlugin外掛，動態新增entry並且構建。2，3步驟的程式碼大概像這樣
  app.use(function (req, res, next) {
    let reg = req.url.match(/pages\/(\w+)\/(\w+)\.html/);
    if (reg) {
      if (fs.existsSync(pathTo.join(process.cwd(), `./src/pages/${reg[1]}/${reg[2]}/v_entry.vue`))) {
        if (!devConfig.entry[`pages/${reg[1]}/${reg[2]}/v_entry`]) {
          devConfig.entry[`pages/${reg[1]}/${reg[2]}/v_entry`] = true;
          //add new entry
          complier.apply(new MultiEntryPlugin(process.cwd(),
          [`./src/pages/${reg[1]}/${reg[2]}/v_entry`, 'webpack-hot-middleware/client'], 
          `pages/${reg[1]}/${reg[2]}/v_entry`));
          //force build
          webpackDevMiddlewareInstance.invalidate()
        }
      } else {
        res.end('pages not found');
        return;
      }
    }
    next();
  });
複製程式碼

最後看下效果，初次構建，只構建了detail頁面的js

動態構建的多頁面vue-cli模版
訪問了 http://localhost:8088/pages/module/index.html 會動態新增入口並且構建

動態構建的多頁面vue-cli模版

專案github : github.com/xyc-cn/webp…

參考資料: Webpack實戰 - 使用動態 entry 改善除錯體驗

相關文章