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

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

創(chuàng)新互聯(lián)專注于平武企業(yè)網(wǎng)站建設,響應式網(wǎng)站開發(fā),商城建設。平武網(wǎng)站建設公司,為平武等地區(qū)提供建站服務。全流程按需定制，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

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

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

增加Node運行內存

在Node中通過JavaScript使用內存時只能使用部分內存（64位系統(tǒng)下約為1.4 GB，32位系統(tǒng)下約為0.7 GB）。所以不管電腦實際的運行內存是多少，Node在運行代碼編譯的時候，使用內存大小不會發(fā)生變化。這樣就可能導致因為原有的內存不夠，導致內存溢出。所以可以增加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

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

配置需要編譯的文件

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

首先所有的頁面配置都是放在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;

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

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

在webpack進行熱更新的時候，實際上是使用了webpack-dev-server這個的服務，然后是否有鉤子能夠給我們提供，如果我們訪問哪個頁面他就編譯那個頁面的代碼。幸運的是找到，在devServer中存在這么一個鉤子函數(shù)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 >不存在的入口</p>');
     }
    }
    next();
   });
  },

multPageConfig是多頁面的配置，在開發(fā)環(huán)境中，做了一下修改，配置如下:

{
  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;

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

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

因為所有的頁面js已經被置為空了，所以編譯的速度非?？臁Ｈ缓笤僭L問頁面的時候，webpack已經攔截訪問的頁面，也就是需要更改的頁面，這時候就手動往dev-entries目錄下寫入需要編譯的文件，從而實現(xiàn)了訪問某個頁面就編譯哪個頁面的代碼

升級html-webpack-plugin版本

多頁面出現(xiàn)內存溢出的問題是因為在編譯的時候，實際是一次更改，編譯了多個文件，這是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的插件還是很方便的，網(wǎng)上有啥happypack類似的插件。由于運行在 Node.js 之上的 Webpack 是單線程模型的，所以Webpack需要處理的事情需要一件一件的做，不能多件事一起做。

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當前標題：解決webpack多頁面內存溢出的方法示例
當前URL：http://muchs.cn/article6/ghgoog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、軟件開發(fā)、外貿網(wǎng)站建設、做網(wǎng)站、網(wǎng)站改版、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司