vue项目打包时配置externals，忽略打包第三方库（前端性能优化方案）

最新推荐文章于 2023-03-28 15:37:58 发布
最新推荐文章于 2023-03-28 15:37:58 发布
阅读量1.3w 收藏 33
点赞数 6
文章标签： vue web javascript 网络优化 内存优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzwwjl1314/article/details/108233321
版权

在vue.config.js里这样写

const isProduction = process.env.VUE_APP_MODE === 'production'

const cdn = {
  // 忽略打包的第三方库
  /**
  * externals 对象属性解析：
  * '包名' : '在项目中引入的名字'
  * 以element-ui举例 我再main.js里是以
  * import ELEMENT from 'element-ui'
  * Vue.use(ELEMENT, { size: 'small' })
  * 这样引入的，所以我的externals的属性值应该是ELEMENT
  */
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT'
  },
  js: [
    'https://cdn.jsdelivr.net/npm/vue',
    'https://unpkg.com/vue-router/dist/vue-router.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js',
    'https://unpkg.com/element-ui@2.13.2/lib/index.js'
  ],
  css: [
    'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
  ]
}

module.exports = {
	chainWebpack: (config) => {
		if (isProduction) {
	      config.plugin('html').tap((args) => {
	        args[0].cdn = cdn
	        return args
	      })
    	}
    	config.plugin('html').tap(args => { // 所有环境配置统一的title
	        args[0].title = '外部联网协议配置系统'
	        return args
      })
	}

	configureWebpack: config => {
		config.externals = cdn.externals
	}
}

在index.html里这样写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="./reset.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>

这样就成功的配置了生产环境第三方库采用cdn引入。能有效减小打包出来的文件体积，我的从2.6MB => 1.7MB ，减少了34%

阿炜死了
关注
  • 6
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
vue项目打包之后背景样式丢失的解决方案
10-17
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue.config.js 全局配置
m0_61177365的博客
07-29 4107
用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置。可以看出，开启productionSourceMap后，浏览器控制台明确的告诉我们test这条结果的输出语句在main.js的20行。所以，source map的作用就是定位。
浅谈vue项目打包优化策略
10-17
主要介绍了浅谈vue项目打包优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目打包编译优化方案
10-14
当一个较复杂的vue项目打包后，文件会非常大，而且访问时资源加载速度很慢，本文介绍了几种措施来优化。
vue.config.js
03-13
vue.config.js vue-cli3配置一些基本的信息
Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)
leaf的博客
06-15 3614
Vue 配置使用 externals 使用cdn减小打包体积 在 vue.config.js 中 书写配置 // 引入webpack const webpack = require('webpack'); const path = require('path'); const assetsCDN = { // 放置需要使用 cdn 的库 externals:{ vue: 'Vue', 'element-plus': 'ElementPlus'
Vue CLI系列之通过 externals 加载外部 CDN 资源
老__L的博客
12-25 984
通过 externals 加载外部 CDN 资源
【无标题】记录一次external在vue项目的配置
qq_40794395的博客
03-28 769
【代码】【无标题】记录一次external在vue项目的配置。
vue.config.js配置详解
qq_35413855的博客
06-05 2905
constpath=require("path"); functionresolve(dir){ returnpath.join(__dirname,dir); } constport=8080;//端口号 constIS_PRODUCTION=process.env.NODE_ENV=="production";//正式环境 constCompressionPlugin=require("compression-webpack-plugin"...
VUE 通过EXTERNALS 加载外部CDN资源，减少打包体积
weixin_51225684的博客
09-13 1727
使用externals 代码 在vue.config.js里面 设置打包排除项使用此配置项 config.plugin('html').tap(args => { isProd args[0].isProd = true return args }) 做 数据的真假，对public/index.html的 cdn外链 开发模式和发布模式的 引入和隐藏。
Vue Cli3 打包配置并自动忽略console.log语句的方法
10-15
主要介绍了Vue Cli3 打包配置并自动忽略console.log语句的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli3的项目 CDN链接报错解决 Uncaught TypeError: Cannot read property 'prototype' of undefined at Object.
热门推荐
weixin_42556438的博客
09-17 1万+
Uncaught ReferenceError: iview is not defined 出现这个问题的原因是路径的问题 确保你的路径是正确的，或者是既全局引入了iview，又按需引入，会造成这样的报错 Uncaught TypeError: Cannot read property ‘prototype’ of undefined at Object. (iview.min.js:1) CDN...
vue//webpack配置
weixin_37877794的博客
07-24 390
参考 vue.config.js中有 webpack 配置 const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const history = require('connect-history-api-fallback') const convert = require('koa-connect') // 使用 WEBPACK_SERVE 环境变量检测当前是否是在 webp
webpack编译提速：使用externals和DllPlugin
码飞_CC的博客
02-23 1285
原始未优化（userCenter.bundle.js：7.55 MB)： 使用externals排除对ag-grid-community的打包后(userCenter.bundle.js:5.84 MB): 再通过dll单独打包bizcharts后（userCenter.bundle.js：4.31 MB）：
Vue 中使用externals和CDN来优化项目的体积
小火车况且况且况且的博客
03-28 6676
Vue 中使用externals和CDN来优化项目的体积 externals是webpack中的一个配置 文档说明 主要是为了防止项目在打包的时候，将一些通过import引入的包也一起打包到bundle中，从而造成打包文件太大。通过运行的时候从外部获取这些包的依赖 在没有使用externals和CDN引入依赖包的时候，打包的项目代码体积比较大 使用之后,指定的依赖项就不会被打包 ...
vue项目优化——Webpack的externals的理解
qq_42931285的博客
05-15 3120
externals、vue项目优化
对external的理解
weixin_46611729的博客
03-12 902
external在 vue.config.js 文件中的 configureWebpack 对象下面 例子： // 要排除的包名 // key(是要排除的包名）: value(实际上是实际引入的包的全局的变量名) // 因为要排除 element-ui 所以后面要引入 CDN 文件，CDN 文件中有 ELEMENTUI 的全局变量名 // webpack打包的时候会根据 externals 的配置，首先会排除掉定义的包名（这些包不需要打包） // 空出来的位置，会用变量来替换 externals = {
Vue 打包优化之 externals 抽离公共的第三方库
天问博客-专注于大前端技术
11-29 3068
使用 @vue/cli 脚手架构建的 Vue 全家桶项目，默认配置下，打包后会把 vue、vue-router、axios、vuex、element-ui、echarts 等公共库打包在一起，导致基础 chunk、vendor 包体积特别大，有时一个文件能达到 3-5MB，这会大大影响首次加载速度。因此需要抽离第三方公共库，配合使用 CDN 加速。
vue项目使用externals优化打包体积
weixin_43794749的博客
06-18 761
查看打包体积 下载查看打包体积的插件 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中配置 chainWebpack: config => { // 打包结果分析 if (process.env.NODE_ENV === "development") { config .plugin("webpack-bundle-analyzer") .use(requ
vue项目打包速度优化
最新发布
08-17
对于Vue项目的打包速度优化，可以尝试以下几种方法： 1. 使用CDN：将一些常用的第三方库（如Vue、Vuex、Vue Router等）从本地打包中移除，改为通过CDN引入。这样可以减少打包体积和加快打包速度。 2. 按需引入组件：在使用UI组件库时，可以考虑按需引入组件，而不是全部引入。这可以通过babel-plugin-component等工具来实现，减少不必要的打包和编译时间。 3. 代码拆分：将大型的代码块拆分成更小的模块，利用Webpack的代码分割功能（如异步加载、按需加载）来实现懒加载。这样可以减少初始加载时间，提升用户体验。 4. 优化图片：对于项目中的图片资源，可以使用压缩工具来减小图片大小，如使用imagemin-webpack-plugin等插件进行图片压缩。 5. 缓存和持久化：合理利用浏览器缓存和服务端缓存，减少不必要的请求和加载时间。另外，可以考虑使用localStorage或IndexedDB等技术进行数据持久化，减少数据加载时间。 6. 使用Tree Shaking：通过配置Webpack的tree shaking功能，可以剔除项目中未使用的代码，减少打包体积和提升加载速度。 7. 配置合理的Webpack：根据项目需求，合理配置Webpack的各项参数，如使用cache-loader、thread-loader等插件来提升构建速度。 需要注意的是，优化策略要根据具体项目情况进行选择，不同的项目可能有不同的瓶颈和优化空间。可以通过Webpack Bundle Analyzer等工具来分析打包结果，找出优化的重点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值