公司的项目是分割成微前端了,由于第一次访问微应用时速度慢。特别优化了一下。
项目: vue-cli3 + vue2 + webpack4.46.
压缩前端打包内容
compression-webpack-plugin
1、安装compression-webpack-plugin插件,
npm install compression-webpack-plugin --save-dev
这是插件地址,报错的话,找到对应自己项目的版本号。
我用的6.1.1版本
npm install compression-webpack-plugin@6.1.1 --save-dev
https://www.npmjs.com/package/compression-webpack-plugin?activeTab=versions
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; }