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

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]\.";
}

你可能感兴趣的:(webpack,js,vuecli,vue)