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

時間 2019-11-17

標籤動態構建頁面 vue cli 模版简体版

原文原文鏈接

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

1、如何使用

//默認全局安裝vue-cli
vue init xyc-cn/webpack yourProject
cd yourProject
npm run dev
複製代碼

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

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

2、多頁面構建原理

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

指定一個命名規則的文件作爲入口文件(例如v_entry.js)
遍歷src目錄，搜索文件入口(搜索所有的v_entry.js文件，生成一個webpack entry對象)
每一個入口文件新建一個htmlPlugin生成html,而且把這個入口文件夾註入到html裏面

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

隨着業務的發展，項目會無限地膨脹，開發構建速度慢的問題會愈來愈嚴重，博主的項目有幾十個頁面，每一個npm run dev都到等待幾十秒時間。會讓人很抓狂。理想的狀況是，npm run dev的時候，只構建一個頁面，每次訪問到新頁面的時候，再從新構建這個新頁面的內容。這個時候express中間件webpack-dev-middleware派上用場了，經過它咱們能夠實現上述的理想構建方案。流程是這樣的：github

修改上面圖片那個入口文件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;
複製代碼

添加一個express中間件，每當有html請求過來，就判斷下這個請求有沒對應的entry，有就執行第三步，沒有就返回錯誤。
調用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();
  });
複製代碼