VUE 项目性能优化-- 实战必须要懂得

最新推荐文章于 2023-12-25 07:41:48 发布

想哥找茬

最新推荐文章于 2023-12-25 07:41:48 发布

阅读量977

点赞数

分类专栏：前端 JS vue 文章标签： webpack 打包优化 cacheGroups gzip压缩 nginx配置

本文链接： https://blog.csdn.net/weixin_36508680/article/details/121847066

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

1、打包优化（如果项目比较杂，插件用的比较多，这种方式就很有效果）

cacheGroups 公共代码抽离，根据当前项目使用的插件进行分类打包

module.exports = {
  // 公共代码抽离
  configureWebpack: config => {
    config.optimization = {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: 5,
        automaticNameDelimiter: '-',
        name: true,
        cacheGroups: {
          'element-ui': {
            name: 'element-ui',
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
            priority: -10,
          },
          'vue-amap': {
            test: /[\\/]node_modules[\\/]_?vue-amap(.*)/,
            name: 'vue-amap-vendor',
            priority: -10,
          },
          vendors: {
            name: 'chunk-vendor',
            test: /[\\/]node_modules[\\/]/,
            priority: -15,
          },
          tinymce: {
            name: 'chunk-tinymce',
            test: /[\\/]node_modules[\\/]_?tinymce(.*)/,
            priority: -10,
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
        },
      },
    };
  },

  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['element-ui', 'vue-amap-vendor', 'chunk-vendor', 'index', 'chunk-tinymce'],
    },
  },
};

上面的page里面的chunks 一定不要忘记添加上去，这个就是打包后要引入的test值，否则项目都启动不了。

这是打包后的结果

2、打包后gzip 压缩js。发布后并配置nginx。(nginx单独配置也可以实现gzip压缩，这里是减轻nginx 负担)

const CompressionPlugin = require('compression-webpack-plugin'); // 开启zip压缩
module.exports = {
// 公共代码抽离
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 判断是否生产环境的
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$/,
            threshold: 10240, // 超过10K就压缩, 否则还比原来大
            deleteOriginalAssets: false, // false保留源文件（.js）
          }),
        ],
      };
    }
  },
}

打包完成后发布

nginx 增加相关配置（具体可以参考nginx 配置参数）

# 开启gzip
gzip on;

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

# gzip 压缩级别 1-10
gzip_comp_level 2;

# 进行压缩的文件类型。

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;

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

见证差距的时候到了：