当前位置: 首页 > Web前端 > vue.js

vue-cli2.0-包优化

时间:2023-03-31 21:17:26 vue.js

这三者可以大大缩短打包时间,效率非常好。基本上可以缩短一倍以上。HappyPack将文件缩短一倍以上。constHappyPack=require('happypack')constos=require('os')consthappyThreadPool=HappyPack.ThreadPool({size:os.cpus().length})插件:[newHappyPack({id:'aaaaaaaaabbbbbbbccccc',loaders:[{loader:'babel-loader?cacheDirectory=true'}],线程池:happyThreadPool,verbose:true})],module:{rule:[{test:/\.js$/,loader:'happypack/loader?id=aaaaaaaaabbbbbbbccccc',}]}二。autodll-webpack-plugingit:https://github.com/asfktz/aut...npmrunbuild--report,可以看到各个文件的打包比例。你可以在dll中配置更大的第三方库来降低打包文件的速度它也会更快文件webpack.base.conf.jsplugins:[newHtmlWebpackPlugin({inject:true,template:'index.html'//模板文件}),newAutoDllPlugin({path:'/static/js/',//配置注入:true,//结合html-webpack-plugin注入到htmlfilename:'[name].js',条目:{供应商:['iview','vue-echarts','jquery','vue','codemirror','lodash',]}})],三。webpack-parallel-uglify-plugin文件webpack.prod.conf.js//好的newParallelUglifyPlugin({cacheDir:'.cache/',uglifyJS:{output:{comments:false},compress:{warnings:false}}}),replace//badnewwebpack.optimize.UglifyJsPlugin({output:{comments:false,},compress:{drop_console:true,pure_funcs:['console.log'],//移除控制台警告:false},cache:true,parallel:true,sourceMap:true}),4.压缩图片image-webpack-loader可以缩小一点