vue项目运行起来进入了打包查看文件大小页面,怎么回事（vue项目打包后打开很慢）

本篇文章给大家谈谈vue项目运行起来进入了打包查看文件大小页面,怎么回事，以及vue项目打包后打开很慢对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue项目打包后js文件压缩
• 2、vue打包后样式变小
• 3、减小vue、element-ui打包后的文件大小
• 4、vue项目打包gzip压缩
• 5、Vue/React 项目运行或者打包出现内存溢出解决方案
• 6、vue项目打包后打开页面空白解决办法

Vue项目打包后js文件压缩

这段时间因为免费试用了 一台阿里云的服务器，配置是 2核4G 2M，

因为带宽太低了，每次在第一次加载的时候太慢了，通过F12调试，发现主要是因为加载的 js 过大而引起的。因此本文将主要讲解Vue项目打包后js、css、svg等文件过大的解决办法。

通过引入 compression-webpack-plugin 插件来打包，然后开启 nginx gzip 来解决问题

配置 compression-webpack-plugin 前后打包对比，我们查看 dist目录，能够发现大于10KB的 js ， css 等文件已经被压缩了

vue打包后样式变小

这两天发现一个特别奇怪的问题，做好的Vue项目打包后页面整体都缩小了，然后去度娘上搜索解决方案，但是上面都是页面放大或者防止页面缩小放大的解决方案，好不容易搜到有类似的标题，但是没有解决方案，百思不得其解，各种方法都试过了，都无济于事，不知道你们是否有遇到过这样的问题？ 后来，我想着将打包后的页面放大看看，结果一打开就发现问题所在了，打包后的页面是按100%来显示的，而打开的本地项目页面是按125...

减小vue、element-ui打包后的文件大小

原文在这里

具体思路是通过将element-ui、vue等常用的包使用外链的方式部署

操作如下：

1、修改index.html页面，再head中引入cdn。

2.修改webpack.base.conf.js文件中的module.exports 添加externals配置:

3.删除main.js中的相应import from。因为如果不删除，打包的时候还会把这两个文件打进去

在Vue-cli 3.0中使用cdn加速的方法：

vue项目打包gzip压缩

gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多，需要nginx也启用gzip

安装低版本才不会报错

配置位置

config\index.js

安装低版本

对vue.config.js进行配置

// 打包 使用gzip压缩

const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 定义压缩文件类型

运行npm run build后出现gz结尾的文件就成功了

Vue/React 项目运行或者打包出现内存溢出解决方案

因为项目过大运行打包项目的时候报错FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed

failed - JavaScript heap out of memory JavaScript堆内存不足，这里说的 JavaScript 其实就是 Node，我们都知道 Node 是基于V8引擎，在一般的后端开发语言中，在基本的内存使用上没有什么限制，在 Node 中通过 JavaScript 使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB），这就是我们编译项目时为什么会出现内存泄露了，因为前端项目如果非常的庞大，webpack 编译时就会占用很多的系统资源，如果超出了V8对 Node 默认的内存限制大小就会出现刚刚我截图的那个错误了，那怎么解决呢？V8依然提供了选项让我们使用更多的内存。Node 在启动时可以传递 --max-old-space-size 或 --max-new-space-size 来调整内存大小的使用限制。

React

一般情况如果用过第一种方案成功可以不使用第二种，我是遇到第一种配置内存还不起作用的时候用第二种方案生效。

全局安装increase-memory-limit

命令行cmd窗口运行：npm install -g increase-memory-limit，

进入项目文件夹，运行：increase-memory-limit（只需要执行一次即可）

vue项目打包后打开页面空白解决办法

网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。

1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。

assetsPublicPath默认的是  ‘/'  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ '

2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。

vue项目运行起来进入了打包查看文件大小页面,怎么回事的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue项目打包后打开很慢、vue项目运行起来进入了打包查看文件大小页面,怎么回事的信息别忘了在本站进行查找喔。