webpack打包优化方案

调试工具:安装webpack-bundle-analyzer打包可视化工具,可以看到打包文件大小,从而有针对性的优化。

npm install --save-dev webpack-bundle-analyzer。

方案一:将第三方依赖包使用cdn进行引入减小文件包体积(例:vue-router,element-ui等)

1.在vue.config.js文件中配置

在index.html中使用cdn引入

获取相关依赖cdn:BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 铂特优选

方案二:进行包的拆解

相关推荐
暮紫李11 分钟前
项目中如何强制使用pnpm
前端
哈哈哈笑什么13 分钟前
如何防止恶意伪造前端唯一请求id
前端·后端
kevinzzzzzz16 分钟前
基于模块联邦打通多系统的探索
前端·javascript
小胖霞19 分钟前
彻底搞懂 JWT 登录认证与路由守卫(五)
前端·vue.js·node.js
用户938169125536021 分钟前
VUE3项目--组件递归调用自身
前端
昔人'29 分钟前
CSS content-visibility
前端·css
灵魂学者35 分钟前
Vue3.x —— ref 的使用
前端·javascript·vue.js
梦6501 小时前
VUE树形菜单组件如何实现展开/收起、全选/取消功能
前端·javascript·vue.js
我命由我123451 小时前
微信小程序 - 避免在 data 初始化中引用全局变量
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
可爱又迷人的反派角色“yang”1 小时前
Mysql数据库(二)
运维·服务器·前端·数据库·mysql·nginx·云计算