vue打包文件过大、Vue打包压缩

公司的项目是分割成微前端了,由于第一次访问微应用时速度慢。特别优化了一下。
项目: vue-cli3 + vue2 + webpack4.46.0
一 微前端预加载资源。
我们的微前端是采用的手动加载方式,所以采用prefetchApps方法。
在需要加载的文件中写如下代码

import { prefetchApps } from 'qiankun';
prefetchApps[
{name: 'microApp1', entry: 'http://xxxxxxxx'},
{name: 'microApp2', entry: 'http://yyyyyyyyy'}
] 

这样的话就能在你还没有访问微前端页面前,就能把微前端应用的js和css加载回来。

二压缩微前端打包内容。
1、安装compression-webpack-plugin插件,

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

这是插件地址,报错的话,找到对应自己项目的版本号。
https://www.npmjs.com/package/compression-webpack-plugin

2、配置vue.config.js

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  configureWebpack: {
	output: {},
  	plugins: [
    	new CompressionPlugin({
    		filename: '[path].gz[query]', // 注意版本不一样,这里写法可能不一样
    		test: /\.js$|\.html$|\.css$/,
    		threshold: 10240
    	}),
  	],
  }
};

3、配置nginx,必须配置。要不然你上面白干。

http {
	gzip: on;
	gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
	gzip_static on;
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值