发表于： 2021-08-19 21:07:29
1 1875
今天完成的事情：vue 做的项目算是搞完了（还有些要需要完善的一些细节，），学习了打包，，项目优化。项目打包下来两三兆大小，经过优化现在只有400k了。
打包：
打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：
1，通过命令参数的形式生成报告
//通过 vue-cli 的命令选项可以生成打包报告
// ---report 选项可以生成 report.html 以帮助分析包内容
2，通过可视化的 UI 面板 直接查看报告（更直观）
在可视化的 UI 面板中，通过控制台和分析面板，可以方便的看到项目中所存在的问题
我直接在运行的UI面板，进行项目打包：
打包大小缩减方法：
通过externals 加载外部CDN资源：（缩减打包后文件体积）
默认情况下，通过import 语法导入的第三方依赖包，最终会被打包合并到同一个文件夹中，从而导致打包成功后，单文件体积过大的问题
通过webpack 的 externals 节点，来配置并加载外部的CDN 资源。凡是声明在externals中的第三方依赖包，都不会被打包。
在vue.config.js 文件中写入： 声明在externals中的第三方依赖包，都不会被打包。
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor',
})
通过CDN 优化ElementUI 的打包
流程：
1，在main-prod.js 中，注释掉element-UI 按需加载的代码
2，在index.html 中的头部区域中，通过CDN 加载elementUI的JS和css样式
路由懒加载
打包构建项目时，JavaScript 包会变得非常大，影响页面的加载。如果我们把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，就会提高加载效率。
分为三步：
1，安装'@babel/plugin-syntax-dynamic-import'包
2，在babel.config.js配置文件中申明插件。
3，将路由改为按需加载的形式，如下：
const Foo =() => import(* webpackChunkName: "group-foo" */ './Foo/vue')
const Bar =() => import(* webpackChunkName: "group-foo" */ './Bar/vue')
const Baz =() => import(* webpackChunkName: "group-boo" */ './Baz /vue')
上述的webpackChunkName组件会将相同名字的路由（如：group-foo）分配到一个JS文件中，在请求Foo组件的时也会将Bar组件同时也请求到了。反之Baz 组件则要会单独放到一个JS文件中，另行请求
// import Login from '../components/login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/login.vue')
// import Home from '../components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
// import Welcome from '../components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
// import Users from '../components/user/Users.vue'
const Users = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/user/Users.vue')
// import Rights from '../components/power/Rights.vue'
const Rights = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/power/Rights.vue')
// import Roles from '../components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/power/Roles.vue')
// import Cate from '../components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "cate_params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/Params.vue'
const Params = () => import(/* webpackChunkName: "cate_params" */ '../components/goods/Params.vue')
// import GoodsList from '../components/goods/List.vue'
const GoodsList = () => import(/* webpackChunkName: "goodslist_add" */ '../components/goods/List.vue')
// import Add from '../components/goods/Add.vue'
const Add = () => import(/* webpackChunkName: "goodslist_add" */ '../components/goods/Add.vue')
// import Order from '../components/order/Order.vue'
const Order = () => import(/* webpackChunkName: "order_report" */ '../components/order/Order.vue')
// import Report from '../components/report/Report.vue'
const Report = () => import(/* webpackChunkName: "order_report" */ '../components/report/Report.vue')
明天计划的事情：补齐项目细节，回顾总结此次学习的项目学到的知识。！！
返回列表
评论