如何知道打包体积？
打包构建的时候，使用--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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。