优化方法:
- 路由懒加载 src/router.js
改成import引入
2.按需引入
echarts、loadash、element等,具体查看相关官方文档
3.vue.config.js设置生成环境
关闭sourceMap,设置productionSourceMap为false即可
去掉css的sourceMap
productionSourceMap为false
4.cdn引入需要完整引入的包,需要在CDN不可用时用本地js
配置externals,实现使用CDN时仍然可以在业务代码中使用import的方式引入
CDN引入。需要验证CDN是否成功,失败则使用本地的包 public/index.html
只在生产环境使用CDN或min包(CDN不可用时),开发环境仍然使用npm包
配置htmlWebpackPlugin,添加环境变量
判断是否是生产环境
DllPlugin,减少打包时间(待完成)
Gzip,nginx中启用服务器端gzip或者本地打包启用gzip配合服务器的gzip_static nginx/default.conf
结果验证:
使用vue-cli-service build --report 命令
可以在dist目录下生成一个report.html文件,运行即可查看各个包在最终的发布代码中的大小。
// package.json中添加script,使用npm run report
开始优化前
优化后