如何知道打包体积？

打包构建的时候，使用--report命令：

vue-cli-service build --report
复制代码

打包结束后，会在dist目录里面生成一个report html文件，里面会显示你打包体积分布情况，可以根据项目情况，侧重优化。

如何知道打包速度

有的人可以通过--progress查看到打包耗时，但是对于我项目无用，使用ProgressBarPlugin插件解决

config.plugins.push(new ProgressBarPlugin())}

删除你没用到的代码

在webpack里加上下面插件，每次serve的时候，会生成一个json文件，里面会显示你没用到的文件

config.plugin('uselessFile')
.use(new UselessFile({     
    root:path.resolve(__dirname, './src'),     
    out:'./fileList.json',     
    clean:false,       
    exclude: /node_modules/

开启Gzip

const productionGzipExtensions = ['js','css']
const gzipCompressPlugin = new CompressionWebpackPlugin({        
    filename: '[path].gz[query]',     
    algorithm: 'gzip',       
    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), 
    threshold: 10240, 
    minRatio: 0.8, 
    })   
config.plugins.push(gzipCompressPlugin)

生产环境删除console等

注意，安装​​terser-webpack-plugin​​版本要注意与你webpack的对应，不然会安装失败哦！我使用的是4.2.3

let terserOption = new TerserPlugin({     
  terserOptions: {            
  test: /\.js(\?.*)?$/i,        
  exclude: /\/node_modules/,    
  warnings: false,           
  mangle: true, 
  compress: {   
     drop_console: true,             
     drop_debugger: true,        
     pure_funcs: ['console.log'] 
 }
 )}
 config.plugins.push(terserOption)

生产关闭sourcemap

productionSourceMap: false



作者：西门吹喵
链接：https://juejin.cn/post/7153527700286603300
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。