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

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

import { prefetchApps } from 'qiankun';
1

prefetchApps[
{name: 'microApp1', entry: 'http://xxxxxxxx'},
{name: 'microApp2', entry: 'http://yyyyyyyyy'}
] 
1
2
3
4

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

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

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

这是插件地址，报错的话，找到对应自己项目的版本号。
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
    	}),
  	],
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13

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

http {
	gzip: on;
	gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
	gzip_static on;
}
1
2
3
4
5