打包构建与性能优化

一,运行npm run build, 会自动生成dist文件夹,有两个静态的js资源

打包构建与性能优化

 

 

 1.,chunk-vendors.js是第三方的插件的js文件, app.js是自己定义的组件等写的文件,哈希的文件,如果跟新文件,浏览器有缓存,不需要用户再去请求,直接用本地资源

增量发布

2.,vue-cli3,有个资源可视化展示的命令,在npm,script , npm run report  ,一样会打包构建,但会多一个report.html, 查看资源体积大小打包构建与性能优化

 

 

打包构建与性能优化

 

资源体积大小可视化图

打包构建与性能优化

 

 此时,Monment这个第三方插件的体积太大了(有很多国际化的东西,不需要,可以清除),我们需要用webpackde 上下文替换插件配置

 打包构建与性能优化

 

 在vue.config,js中的chainWebpack配置, vue-cli3查看,https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans

引入webpack 

const  webpack = require('webpack')

打包构建与性能优化

 

 此时,在npm  run report ,发现comment的插件体积大大缩小了

如何看webpack配置成功, vue inspect >>output1.js     可在vue-cli官网中查看

打包构建与性能优化

 

上一篇:视频学习


下一篇:.NET报表生成器Stimulsoft Reports.Net 常问问题解答