因?yàn)樽约旱捻椖渴腔趘ue-cli3進(jìn)行開發(fā)，所以這里只討論這種情況下的解決辦法

在進(jìn)行多頁面開發(fā)的時候，項目剛開始階段，因?yàn)槲募^少，所以代碼編譯速度還行，但是隨著項目逐漸增大，webpack編譯的速度越來越慢，并且經(jīng)常出現(xiàn)內(nèi)存溢出的情況。

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

增加Node運(yùn)行內(nèi)存

在Node中通過JavaScript使用內(nèi)存時只能使用部分內(nèi)存（64位系統(tǒng)下約為1.4 GB，32位系統(tǒng)下約為0.7 GB）。所以不管電腦實(shí)際的運(yùn)行內(nèi)存是多少，Node在運(yùn)行代碼編譯的時候，使用內(nèi)存大小不會發(fā)生變化。這樣就可能導(dǎo)致因?yàn)樵械膬?nèi)存不夠，導(dǎo)致內(nèi)存溢出。所以可以增加Node的運(yùn)行內(nèi)存，下面是兩種方法

更改cmd

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

@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服務(wù)的更改下：

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

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

配置需要編譯的文件

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

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

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ù)情況下，一個產(chǎn)品都是由多個業(yè)務(wù)線構(gòu)成，每次可能需要更改的就是某一條業(yè)務(wù)線，就完全可以單獨(dú)創(chuàng)建一個這條業(yè)務(wù)線的配置文件，然后再這個文件寫入你需要編譯的頁面名稱，就可以單獨(dú)編譯這個頁面，或者說在調(diào)用通過傳入的字符串來編譯那些頁面

使用webbpack-dev-serve鉤子進(jìn)行單獨(dú)編譯

在webpack進(jìn)行熱更新的時候，實(shí)際上是使用了webpack-dev-server這個的服務(wù)，然后是否有鉤子能夠給我們提供，如果我們訪問哪個頁面他就編譯那個頁面的代碼。幸運(yùn)的是找到，在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 style="font-size: 50px;">不存在的入口</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, // 配置多頁應(yīng)用

因?yàn)樗械捻撁鎗s已經(jīng)被置為空了，所以編譯的速度非常快。然后再訪問頁面的時候，webpack已經(jīng)攔截訪問的頁面，也就是需要更改的頁面，這時候就手動往dev-entries目錄下寫入需要編譯的文件，從而實(shí)現(xiàn)了訪問某個頁面就編譯哪個頁面的代碼

升級html-webpack-plugin版本

多頁面出現(xiàn)內(nèi)存溢出的問題是因?yàn)樵诰幾g的時候，實(shí)際是一次更改，編譯了多個文件，這是html-webpack-plugin的問題。因?yàn)闆]生成一個頁面，就需要調(diào)用一下new htmlWebpackPlugin()，多個頁面的時候內(nèi)存就不夠用了。所以改一下這個這個webpack插件的版本,升級到4.0.0-beta.8這個版本。然后再vue.config.js中添加下面的配置，這樣也不會造成內(nèi)存溢出。

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

其他加快編譯的技巧

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論