vue-cli2.0-打包优化

Posted 2021-09-04 NANA

这三个可以大量缩短打包时间
效率很好
基本可以缩短不止一倍

一. HappyPack

缩短不止一倍

文件 webpack.base.conf.js

const HappyPack = require(\'happypack\')
const os = require(\'os\')
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length})


 plugins: [
    
    new HappyPack({
      id: \'aaaaaaaaabbbbbbbccccc\',
      loaders: [{
        loader: \'babel-loader?cacheDirectory=true\'
      }],
      threadPool: happyThreadPool,
      verbose: true
    })
  ],
  module: {
   rule: [{
        test: /\\.js$/,
        loader: \'happypack/loader?id=aaaaaaaaabbbbbbbccccc\',
   }]
  }

二. autodll-webpack-plugin

git: https://github.com/asfktz/aut...

npm run build --report
可以看到每个文件打包占比图
可以将其中较大的第三方库配置到dll中
减小打包后的文件 速度也会快很多

文件 webpack.base.conf.js

plugins: [
    
    new htmlWebpackPlugin({
      inject: true,
      template: \'index.html\' // 模版文件
    }),
    new AutoDllPlugin({
      path: \'/static/js/\',  //自己配
      inject: true, // 与 html-webpack-plugin 结合使用，注入html中
      filename: \'[name].js\',
      entry: {
        vendor: [
          \'iview\',
          \'vue-echarts\',
          \'jquery\',
          \'vue\',
          \'codemirror\',
          \'lodash\',
          
        ]
      }
    })
  ],

三. webpack-parallel-uglify-plugin

文件 webpack.prod.conf.js

// good

new ParallelUglifyPlugin({
      cacheDir: \'.cache/\',
      uglifyJS:{
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),
    
替换 
 
// bad  
new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false,
      },     
      compress: {
        drop_console: true,
        pure_funcs: [\'console.log\'], 
        //移除console
        warnings: false
      },
      cache: true,
      parallel: true,
      sourceMap: true
    }),
    

四. 压缩图片
image-webpack-loader
可以缩小一丢丢