VUE-CLI 开启GZIP方法

最新推荐文章于 2024-04-26 16:47:03 发布

亚翎_Ahlin

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.7k

点赞数 1

分类专栏： vue-cli 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/u011607960/article/details/122852381

版权

vue-cli 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题：当vue项目时，出现插件过多，导致build项目时，chunk-vender.js文件过大，加载速度变慢

1.使用懒加载路由：

// 首页
{
  path: '/home',
  // name: 'home',
  component: RouteView,
  redirect: '/home/index',
  meta: { title: '主页', icon: 'dashboard', permission: ['super', 'agent', 'kefu'] },
  children: [
    {
      path: '/home/index',
      name: 'home',
      component: (resolve) => require(['@/views/home/index'], resolve),
      meta: { title: '数据统计', permission: ['super', 'agent', 'kefu'] }
    },
  ]
},


//重点代码：
(resolve) => require(['@/views/home/index'], resolve)

2.使用compression-webpack-plugin 压缩成gzip

注意版本：有时候高了用不了

//安装
npm i compression-webpack-plugin@5.0.1

//引入插件 压缩js 和css文件
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

const vueConfig = {
  configureWebpack: {
    // webpack plugins
    plugins: [

      //....其他代码

      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: true // 删除源文件 （可选）
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      })
    ],

    //....其他代码
  },
}

项目再执行 npm run build 时, 目录 dist/js 文件就会生成 xxx.js.gz 文件。说明压缩成功

配置nginx

server
{
    listen 80;
    listen 443 ssl http2;
    server_name xxx.com;
    
    location ~* \.(css|js)$ {
       gzip_static on;
    }
    
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    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;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    #....其他配置

}