当前位置:首页 > 博客 >Javascript > 正文

Nuxt项目优化内存以及构建时间

时间:2019-07-19 21:48   作者:admin   点击:

Nuxt项目优化内存以及构建时间

 

问题描述:

整个项目构建时间大概需要5分钟左右,而且不扩展内存的话也会出现内存泄漏,有时候可能扩展了内存还是会溢出(node进程默认(64)1.4G

 

问题环境:

         Node: 10.15.1

         Nuxt: 2.5.0

         Webpack: 4.33.0

 

问题分析:

         既然是webpack构建时出现的内存泄漏,暂时排除代码本身问题,可能是loaderpluging所耗资源太多造成的,所以着重优化webpack配置

 

Nuxt项目的配置文件是nuxt.config.js 也就是去配置webpack

 

优化点:

1、  关闭开发模式的eslint,这个是占用时间比较多的地方,注释掉下面的代码

image.png


2、  由于项目每个页面都需要用一些公用的css,目前是全部行内样式写再也页面的,由于dev的时候,这些资源都在内存里面,所以可能有很多重复的css样式,提出公用的css

extractcss: true

image.png


3、  本身打包是单线程操作的,我们可以提供多线程方式加快构建速度

Parallel: true //开启

image.png

多线程是利用webpack4thread-loader开启多线程的,但是多线程是有限制的

https://www.webpackjs.com/loaders/thread-loader/


4、  FOUC错误修复,主要是很多异步组件的css也被异步加载,造成部分页面会出现css闪烁。查看了vue的服务端渲染机制,他是会把主chunk里面的css打包进link标签,其他的用过异步加载,所以优化webpack的分包机制 webpack4

image.png


5、  代码层面,我看到构建后的文件有多次重复的css,后面发现是代码中有用scss的变量定义模式,但是加了很多不是变量的css文件,这部分也是多余的、重复的

image.png

剔除了一些不是变量定义的css,精简了这个文件,因为这个文件是需要在其他任何地方css之前都要加入进去的,因为这是你定义的一些变量

 

6、  主要分析了下耗内存的编译时段,主要是集中在插件环节,通过尽量的减少对插件使用或者优化插件来实现优化

A、 关闭 devtool

config.devtool = 'eval'