解决webpack多页面内存溢出的方法示例_javascript技巧

来源:脚本之家  责任编辑:小易  

已经删了不少应用,但手机一直提示内存不足该怎么办?www.zgxue.com防采集请勿采集本网。

因为自己的项目是基于vue-cli3进行开发,所以这里只讨论这种情况下的解决办法

用释放内存释放一下。该变量内存地址。然后要用的时候重新申请。

在进行多页面开发的时候,项目刚开始阶段,因为文件较少,所以代码编译速度还行,但是随着项目逐渐增大,webpack编译的速度越来越慢,并且经常出现内存溢出的情况。

首先我们的手机分为了手机系统内存和手机用户内存(PS:小编不是专业的,不知道专业词语叫什么,但是大致是这样的),手机系统内存随着我们安装软件越来越多,软件更新或者软件用的越久,软件的

下面就是几种尝试的方法,加快编译的速度

Selenium+PhantomJS?

增加Node运行内存

CPU使用率高,说明CPU工作越繁忙,不要看不起当前普普通通的网页,以为引起电脑上网内存不足,CPU满载,最大“功劳”就是页面元素繁多,音频,视频,浮动窗口,无时无刻不在消耗内存和CPU性能,

在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最近在抓紧学习,会持续更新文章,希望大家多多关注。

可以考虑开发的时候,页面中加载的是源码,然后用livereload实现有修改,自动刷新页面然后在进行release发布的时候,打包编译,测试看看有没有问题。这样进行编译的次数就少了。webpack是可以支持requirejs的AMD的写法的吧内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解webpack 多页面/入口支持&公共组件单独打包
  • 详解webpack多页面配置记录
  • 详解webpack编译多页面vue项目的配置问题
  • 浅谈如何使用webpack构建多页面应用
  • webpack多页面开发实践
  • webpack打包多页面的方法
  • 详解webpack+es6+sass搭建多页面应用
  • webpack教程之webpack.config.js配置文件
  • javascript页面倒计时功能完整示例
  • javascript字符串拼接的效率问题
  • 深入分析下javascript中的[]()+!
  • bootstrap css全局样式和表格样式源码解析
  • javascript把数组作为堆栈使用的方法
  • 第一次接触神奇的bootstrap
  • yepnope.js 异步加载资源文件
  • javascript知识点总结(十一)之js中的object类详解
  • 解决bootstrap模态框数据缓存的问题方法
  • 如何解决webpack使用时内存占用过大的问题
  • 手机明明还有很多内存却一直显示内存不足怎么回事怎么解决?
  • 手机明明还有很多内存却一直显示内存不足怎么回事怎么解决?
  • webpack多页面怎么使用
  • 易语言连续多次访问网页后,内存出现溢出怎么解决?
  • 我的手机并没有下载很多东西,但占用了很多内存,怎么解决
  • 使用phantomjs爬取页面内容时,内存占用过多如何解决
  • 如何解决网页内存对CPU的大量占用
  • webpack打包报javaScript heap out of memory,怎么解决
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧详解webpack 多页面/入口支持&公共组件单独打包详解webpack多页面配置记录详解webpack编译多页面vue项目的配置问题浅谈如何使用webpack构建多页面应用webpack多页面开发实践webpack打包多页面的方法详解webpack+es6+sass搭建多页面应用webpack教程之webpack.config.js配置文件javascript页面倒计时功能完整示例javascript字符串拼接的效率问题深入分析下javascript中的[]()+!bootstrap css全局样式和表格样式源码解析javascript把数组作为堆栈使用的方法第一次接触神奇的bootstrapyepnope.js 异步加载资源文件javascript知识点总结(十一)之js中的object类详解解决bootstrap模态框数据缓存的问题方法js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包react国际化化插件react-i18n-auto使用详js图片无缝滚动(简单利于使用)js实现二级联动简单实例javascript中关于&& 和 || 表达式的小技巧jsp 自动编译机制详细介绍小程序登录之支付宝授权的实现示例js 数组克隆方法 小结iframe thickbox2.0使用的方法javascript 不让鼠标事件触发moment.js轻松实现获取当前日期是当年的第
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved