jeecg-boot前端优化方案

最新推荐文章于 2024-04-23 17:39:30 发布

LiuZnHi

最新推荐文章于 2024-04-23 17:39:30 发布

阅读量1.3k

点赞数

分类专栏： web 文章标签： vue.js html

原文链接：https://blog.csdn.net/weixin_45455227/article/details/111408130

版权

web 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一.CDN的使用
（1）在package.json文件，scripts-build添加–report，yarn build结束后，在dist中会多出一个report.html文件。

"scripts": {
    "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  },

（2）打开report.html文件，包含文件分析图。
色块的大小代表js文件的大小，最大的两个js文件，里面都是一些第三方依赖包，将一些比较大的依赖包提取出来就可以减少chunk-vendors的大小。

（3）在vue.config.js中，使用externals来防止这些依赖包被打包。

解释一下：externals的值是个对象，其中的key是第三方依赖库的名称，同package.json文件中的dependencies对象的key一样。其中的value值可以是字符串、数组、对象（value值应该是第三方依赖编译打包后生成的js文件，然后js文件执行后赋值给window的全局变量名称）。

附上代码块

config.set('externals', {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      'ant-design-vue': 'antd',
      "moment": "moment",
      'vuex': 'Vuex',
      'jsoneditor': 'JSONEditor',
      'echarts': 'echarts'
    })

（4）找到一个开源的cdn加速服务（这里用到的是bootcdn，链接地址：这里是bootcdn链接）

index.html文件中引入cdn的js和css文件

注意：vue.config.js中，externals配置了，才可以引入cdn，且引入cdn的版本一定要和package-lock.json中模块的版本号一致，否则会报错，如果没有package-lock.json，则按照package.json文件中的来

LiuZnHi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jeecg-boot前端优化方案

一.CDN的使用（1）在package.json文件，scripts-build添加–report，yarn build结束后，在dist中会多出一个report.html文件。"scripts": { "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ", "serve":
复制链接

扫一扫

专栏目录