vue打包，减小chunk.js文件提高加载速度

最新推荐文章于 2024-04-30 14:00:42 发布

热情仔

最新推荐文章于 2024-04-30 14:00:42 发布

阅读量7.3k

点赞数 1

分类专栏： webpack js vuecli 文章标签： vue

本文链接：https://blog.csdn.net/qq1248409755/article/details/108968279

版权

js 同时被 3 个专栏收录

19 篇文章 1 订阅

订阅专栏

webpack

5 篇文章 0 订阅

订阅专栏

vuecli

1 篇文章 0 订阅

订阅专栏

vue.config.js

中的配置（直接复制就能使用）

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')//这个插件可以看官网还是很好用的
const productionGzipExtensions = ['js', 'css']//对什么文件进行压缩
const Timestamp = new Date().getTime();//防止http的缓存每次打包用时间戳进行区分
module.exports = {
	//这里是自己的配置
    configureWebpack: {
      output: { // 输出重构  打包编译后的 文件名称 
          filename: `js/[name]${Timestamp}.js`,
          chunkFilename: `js/[name]${Timestamp}.js`
      },
      plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),//该插件能够使得指定目录被忽略，从而使得打包变快，文件变小
        // 下面是下载的插件的配置
        new CompressionWebpackPlugin({
          algorithm: 'gzip',//压缩算法
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//处理所有匹配此 {RegExp} 的资源
          threshold: 10240,//只处理比这个值大的资源。按字节计算
          minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
        }),
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 5, //控制打包生成js的个数
          minChunkSize: 100
        })
      ]
    },
}

小小的插曲还是很好用的
这里注意下这样压缩完还需要nginx配置一下

 server { 
 #在这个server中加入下面这些代码
	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]\.";
}