vue 打包优化，解决包大下载慢

如果你遇到vue打包后单个文件很大。网络传输严重影响了带宽。那你看这篇文章，应该是能帮到你的。本篇文章是实现文件Gz压缩实现。利用compression-webpack-plugin。具体看如下实现步骤

1、安装compression-webpack-plugin插件

npm install --save-dev compression-webpack-plugin

2、在vue.config.js 中引入依赖和相关配置

const CompressionPlugin = require('compression-webpack-plugin')

config.plugin('compressionPlugin').use(new CompressionPlugin({algorithm: 'gzip', // 使用gzip压缩test: /\.js$|\.html$|\.css$/, // 匹配文件名filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)minRatio: 1, // 压缩率小于1才会压缩threshold: 10240, // 对超过10k的数据压缩deleteOriginalAssets: false,
}))

增加如上两处代码。就可以实现代码压缩成gz文件。

本来app.js大小在30MB。现在大小完全降低很多。接下来配置nginx代理gz

3、nginx启用gzip压缩

在nginx http模块中增加如下配置

http{

#直接拷贝如下配置放到http模块中

gzip on;

# 开启静态gz文件返回
gzip_static on;

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

# 设置压缩所需要的缓冲区大小
gzip_buffers 32 4k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 7;

# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

....

再去访问你的网站。你会发现，加载速度瞬间提升了。

vue 打包优化，解决包大下载慢相关推荐

优化vue打包chunk-vendors.js 过大
vue打包的时候chunk-vendors.js文件很大,导致首次加载页面比较慢: 首先: 1.安装compression-webpack-plugin npm install --save-dev ...
Vue 打包优化之 externals 抽离公共的第三方库
使用 @vue/cli 脚手架构建的 Vue 全家桶项目,默认配置下,打包后会把 vue.vue-router.axios.vuex.element-ui.echarts 等公共库打包在一起,导致基础 ...
vue打包慢解决方法 npm run build 卡住不动
起因:最近开发个项目使用的vue,有些功能需要生产版本放服务器上测试,这就出问题了..卡住了,不动了,还不报错这是在vscode的终端里面,试了git hash,试了cmd , 试了powershe ...
cdn加载vue很慢_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
html5怎么改为vue_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
[vue] 如何解决vue打包vendor过大的问题？
[vue] 如何解决vue打包vendor过大的问题? 1.在webpack.base.conf.js新增externals配置,表示不需要打包的文件,然后在index.html中通过CDN引入ext ...
vue解决打包后文件过大的问题-使用压缩插件打包后压缩文件-compression-webpack-plugin
前言: 在用vue开发项目的时候,经常会面临一个文件,就是打包以后文件太大,首页加载时间长的问题,一般我们会从压缩文件,cdn引入文件,加载整合雪碧图等等的方式来优化,这里来谈谈压缩文件,主要使用的插 ...
vue打包生成的js文件过大优化
vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后项目打包之后js文件太大问题问题描述 1.使用cdn引入不怎么改变 ...
vue项目打包优化策略
vue项目打包优化策略使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载这是首先可以 ...

vue 打包优化，解决包大下载慢

vue 打包优化，解决包大下载慢相关推荐

最新文章

热门文章