vuecli开启js代码压缩以及代码分割

最新推荐文章于 2023-08-23 16:43:34 发布

是阿臻

最新推荐文章于 2023-08-23 16:43:34 发布

阅读量311

点赞数

文章标签： nginx java linux js vue

本文链接：https://blog.csdn.net/weixin_43191327/article/details/123059805

版权

配置代码

chainWebpack: config => {
      config.optimization.minimize(true)// 开启压缩js代码
      config.optimization.splitChunks({ // 开启代码分割
        chunks: 'all'
      })
  },

启用gzip压缩(需要配置nginx,可以看出压缩后的文件大小明显变化)

const CompressionWebpackPlugin = require('compression-webpack-plugin')
chainWebpack(config) {
  // 生产模式下启用gzip压缩 需要配置nginx支持gzip
    if (process.env.NODE_ENV === 'production') {
      config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
        {
          filename: '[path][base].gz',
          algorithm: 'gzip',
          test: new RegExp('\\.(js|css)$'),
          // 只处理大于xx字节 的文件，默认：0
          threshold: 10240,
          // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
          minRatio: 0.8, // 默认: 0.8
          // 是否删除源文件，默认: false
          deleteOriginalAssets: false
        }
      ])
    }
}

nginx 配置nginx参考文档

server {
        listen       80;
        server_name  localhost;
        gzip on;
		gzip_static on;    
		gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
		gzip_proxied  any;
		gzip_vary on;
		gzip_comp_level 6;
		gzip_buffers 16 8k;
}