vue打包文件过大、Vue打包压缩,vue首次加载时间

作者: cheng 发布时间: 2023-01-06 浏览: 1134 次 编辑
公司的项目是分割成微前端了,由于第一次访问微应用时速度慢。特别优化了一下。
项目: 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;
}