优化：vue项目减少打包后的体积，使用cdn资源

最新推荐文章于 2024-06-25 18:22:54 发布

_Guava

最新推荐文章于 2024-06-25 18:22:54 发布

阅读量429

点赞数

分类专栏：项目小结文章标签： vue.js webpack

本文链接：https://blog.csdn.net/M_Hapic/article/details/120645891

版权

项目小结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

最近工作中有一个老项目，是后端人员用公司pc端框架写的移动端项目，最近项目的使用量上来了，经常出现资源加载过慢卡死情况，排查了代码一看发现了使用了一堆依赖，还有pc端无用的组件代码，导致打包后的vendor.js文件达到5m多)：，最意外的是public文件有个叫做cdn的本地文件夹？？？通过npm run build --report 看了下，主要是引用了vant和elementUI依赖导致的，想到面试总问到怎么优化项目加载速度的问题，就想到引用外部cdn静态资源，下面就说说怎么操作：

index.html引入外部cdn资源
到对应官网或者cdn 的一些网站，找到要引入的文件，复制到模板index.html中引用：

  <head>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
    />
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/locale/zh-CN.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </body>

删除原来的项目依赖引用（import）
这项目中主要是main.js中全局注册的依赖，不删除会提示要install依赖，直接删除即可。

	//import ElementUI from 'element-ui'
	//import Vant from 'vant';
	//import { Lazyload } from 'vant';
	//import 'vant/lib/index.css';
	//Vue.use(Lazyload);
	//Vue.use(Vant);
	//Vue.use(ElementUI, {
	//  size: 'medium',
	//  menuType: 'text'
	//})

vue.config.js中webpack的externals忽略打包


module.exports = {
  ...
  chainWebpack: config => {
    // 忽略的打包文件
    config.externals({
      vue: "Vue",//key是引入的资源的名称,value是该模块暴露给外部的名称
      vant: "vant",
      axios: "axios",
      ElementUI: "element-ui"
	 'vue-router': 'VueRouter',
     'vuex':'Vuex'
    })
  },
};