解決webpack多頁面內存溢出的方法示例

 更新時間:2019年10月08日 09:53:00   作者:云中歌   我要評論
這篇文章主要介紹了解決webpack多頁面內存溢出的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

因為自己的項目是基于vue-cli3進行開發,所以這里只討論這種情況下的解決辦法

在進行多頁面開發的時候,項目剛開始階段,因為文件較少,所以代碼編譯速度還行,但是隨著項目逐漸增大,webpack編譯的速度越來越慢,并且經常出現內存溢出的情況。

下面就是幾種嘗試的方法,加快編譯的速度

增加Node運行內存

在Node中通過JavaScript使用內存時只能使用部分內存(64位系統下約為1.4 GB,32位系統下約為0.7 GB)。所以不管電腦實際的運行內存是多少,Node在運行代碼編譯的時候,使用內存大小不會發生變化。這樣就可能導致因為原有的內存不夠,導致內存溢出。所以可以增加Node的運行內存,下面是兩種方法

更改cmd

在node_modules/.bin/vue-cli-server.cmd把下面代碼復制上去

@IF EXIST "%~dp0\node.exe" (
 "%~dp0\node.exe" --max_old_space_size=4096 "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
) ELSE (
 @SETLOCAL
 @SET PATHEXT=%PATHEXT:;.JS;=;%
 node --max_old_space_size=4096 "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
)

更改package.json

把啟動Node服務的更改下:

node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve

本質上沒啥區別,都是通過強行增加Node的運行內存,來解決內存溢出的問題。但是這種方法不治本,雖然不會造成內存溢出,但是編譯速度還是挺慢的,編譯完成還是需要等很久。

配置需要編譯的文件

這種就是按需配置需要編譯的文件,為什么出現內存溢出,本質上還是因為需要編譯的文件太多了,那我們就可以減少需要編譯的頁面就可以解決這個問題。

首先所有的頁面配置都是放在page.config.js,如果我們需要對某些特定頁面進行配置,就需要過濾所有的頁面,獲取需要編譯的頁面,下面是編譯文件的寫法

const path = require('path');
const fs = require('fs');
const pages = require('../pages.config');

const params = JSON.parse(process.env.npm_config_argv).original;
const buildPath = params[params.length - 1].match(/[a-zA-Z0-9]+/)[0] || '';

let buildConfig = {
 pages: [],
};


if (!/(test|online|serve)/gi.test(buildPath)) {
 const configJsPath = path.resolve(__dirname, `${buildPath}.js`);

 // 如果該路徑存在
 if (fs.existsSync(configJsPath)) {
  // eslint-disable-next-line import/no-dynamic-require
  buildConfig = require(configJsPath);
 } else if (pages[buildPath]) {
  buildConfig.pages = buildPath.split(',');
 } else {
  throw new Error('該路徑不存在');
 }
} else {
 buildConfig = require('./default');
}
module.exports = buildConfig.pages;

大多數情況下,一個產品都是由多個業務線構成,每次可能需要更改的就是某一條業務線,就完全可以單獨創建一個這條業務線的配置文件,然后再這個文件寫入你需要編譯的頁面名稱,就可以單獨編譯這個頁面,或者說在調用通過傳入的字符串來編譯那些頁面

使用webbpack-dev-serve鉤子進行單獨編譯

在webpack進行熱更新的時候,實際上是使用了webpack-dev-server這個的服務,然后是否有鉤子能夠給我們提供,如果我們訪問哪個頁面他就編譯那個頁面的代碼。幸運的是找到,在devServer中存在這么一個鉤子函數before, 那就可以在vue.config.js中修改

const compiledPages = [];
before(app) {
   app.get('*.html', (req, res, next) => {
    const result = req.url.match(/[^/]+?(?=\.)/);
    const pageName = result && result[0];
    const pagesName = Object.keys(multiPageConfig);

    if (pageName) {
     if (pagesName.includes(pageName)) {
      if (!compiledPages.includes(pageName)) {
       const page = multiPageConfig[pageName];
       fs.writeFileSync(`dev-entries/${pageName}.js`, `import '../${page.tempEntry}'; // eslint-disable-line`);
       compiledPages.push(pageName);
      }
     } else {
      // 沒這個入口
      res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' });
      res.end('<p style="font-size: 50px;">不存在的入口</p>');
     }
    }
    next();
   });
  },

multPageConfig是多頁面的配置,在開發環境中,做了一下修改,配置如下:

{
  pageName: {
    entry: entryPath,
    chunks: [array]
  }
}
const fs = require('fs');
const util = require('util');

const outputFile = util.promisify(fs.writeFile);
async function main() {
 const tasks = [];
 if (!fs.lstatSync('dev-entries').isDirectory()) {
  fs.mkdirSync('dev-entries');
 }
 Object.keys(pages).forEach((key) => {
  const entry = `dev-entries/${key}.js`;
  pages[key].tempEntry = pages[key].entry; // 暫存真正的入口文件地址
  pages[key].entry = entry;
  tasks.push(outputFile(entry, ''));
 });
 await Promise.all(tasks);
}

if (process.env.NODE_ENV === 'development') {
 main();
}

module.exports = pages;

在上面文件中,我們首先需要更改多頁面的配置,創建一個目錄,包含所有的頁面的js文件,但是需要注意的是這些文件都是空的文件,什么都沒有,然后在vue.config.js中多頁面的配置為

pages: multiPageConfig, // 配置多頁應用

因為所有的頁面js已經被置為空了,所以編譯的速度非常快。然后再訪問頁面的時候,webpack已經攔截訪問的頁面,也就是需要更改的頁面,這時候就手動往dev-entries目錄下寫入需要編譯的文件,從而實現了訪問某個頁面就編譯哪個頁面的代碼

升級html-webpack-plugin版本

多頁面出現內存溢出的問題是因為在編譯的時候,實際是一次更改,編譯了多個文件,這是html-webpack-plugin的問題。因為沒生成一個頁面,就需要調用一下new htmlWebpackPlugin(),多個頁面的時候內存就不夠用了。所以改一下這個這個webpack插件的版本,升級到4.0.0-beta.8這個版本。然后再vue.config.js中添加下面的配置,這樣也不會造成內存溢出。

const htmlPlugins = [];
Object.keys(multiPageConfig).forEach((key) => {
  htmlPlugins.push(multiPageConfig[key])
})
configureWebpack: {
  plugins: [
   ...htmlPlugins,
  ],
}

其他加快編譯的技巧

webpack的插件還是很方便的,網上有啥happypack類似的插件。由于運行在 Node.js 之上的 Webpack 是單線程模型的,所以Webpack需要處理的事情需要一件一件的做,不能多件事一起做。

我們需要Webpack能同一時間處理多個任務,發揮多核CPU電腦的威力,HappyPack就能讓Webpack 做到這點,它把任務分解給多個子進程去并發的執行,子進程處理完后再把結果發送給主進程。可能是我電腦太爛了,裝上沒啥太大的提升,具體使用方法可以參照這篇文章webpack優化之HappyPack 實戰。還有一些細節的地方比如說有些包需要加入編譯,但是一般我們在調試的時候只需要在chrome上進行調試,開發環境就不用加入編譯,多處使用的代碼單獨打包,這些也就不說了,大家多多嘗試

這幾種解決多頁面內存溢出的方法各有優缺點,讀者可根據自己的項目自行決定使用哪種方法,可能有時還需要多種方式組合使用,就看看那個好使好用了。

解決這個問題順便研究了一下webpack,配置果然博大精深,難怪市面有流傳webpack配置工程師。推銷一波自己的github最近在抓緊學習,會持續更新文章,希望大家多多關注。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

码报108