Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)

Vue 配置使用 externals 使用cdn减小打包体积

在 vue.config.js 中书写配置

   // 引入webpackconst webpack = require('webpack');const path = require('path');const assetsCDN = {// 放置需要使用 cdn 的库externals:{vue: 'Vue','element-plus': 'ElementPlus',},css:[// 存放 引用 css文件的地址'//unpkg.com/element-plus@1.0.2-beta.48/lib/theme-chalk/index.css',],js:[// 存放 引用 js 文件的地址'//unpkg.com/vue@3.1.1/dist/vue.global.js','//unpkg.com/element-plus@1.0.2-beta.48/lib/index.full.js']}module.exports = {// 配置代理服务器// devServer: {//     port: 9010, // 端口号//     proxy: {//         '/api': {//             target: 'http://localhost:3000', // 后台地址//             changeOrigin: true, // 允许跨域//             pathRewrite: {//                 '^/api': ''  // 匹配别名//             }//         }//     },//     open: true, // 启动自动打开// },configureWebpack: config => {// 视为一个外部库，而不将它打包进来。config.externals = assetsCDN.externals;// 设置全局变量// config.plugins.push(new webpack.ProvidePlugin({//     '@': path.resolve(__dirname, './src'),// }))},chainWebpack: config => {// HtmlWebpackPlugin 插件 存储数据 用于生成html模板config.plugin('html').tap(args => {args[0].cdn = assetsCDN;return args})}
}

在入口文件中书写配置（一般是 public/index.html ）

  <!DOCTYPE html>
<html lang=""><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"><title><%= htmlWebpackPlugin.options.title %></title><!--================循环引入 cdn 中的 css 文件 ================--><% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %><link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" /><% } %><!--==========================================================-->
</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><!--================ 循环引入 cdn 中的 js 文件 ================--><% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %><!--==========================================================-->
</body></html>

vue3 自动配置了全局 API Treeshaking 通过这一更改，如果模块打包工具支持 tree-shake，则 Vue 应用程序中未使用的全局 API 将从最终的打包产物中排除，从而获得最佳的文件大小。
element-plus 也支持按需引入，建议使用按需引入(我这里测试使用，所以全部引入了)，可以更加减少打包后体积大小。同时也可以使 cdn 引用文件变小，加载速度更快

Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)相关推荐

Vue 中使用externals和CDN来优化项目的体积
Vue 中使用externals和CDN来优化项目的体积 externals是webpack中的一个配置文档说明主要是为了防止项目在打包的时候,将一些通过import引入的包也一起打包到bundl ...
echarts如何定制使用以便于减小打包体积
我们一般使用echarts不会全量引入,因为全量引入会导致包体积过大,首页加载白屏的时长会较长,容易被测试或者产品经理吐槽;所以我们一般会按需引入,这里有两种方式可以按需引入,我们分别说下; 第一种, ...
Vue项目优化，减小打包体积
使用Vue-cli脚手架搭建项目Vue的话(这里说明一下,我用的是脚手架2.x),看这里 1.使用路由懒加载原理,让文件按需加载,使用的时候再加载出来在路由文件导出的对象加入下面这种格式 ex ...
vue配置各种环境-环境切换问题-打包自由切换
vue-cli版本是2.0左右的就会有webpack的config目录 vue-cli版本是3.0以上的就会有vue.config.js没有config目录我们先来看第一种怎么配置(有webpack ...
vue配置多个跨域+下载打包
本地项目需要下载阿里云上的文件,而且需要前端下载后打包1.配置多个代理 devServer: {host: '0.0.0.0',port: port,proxy: {[process.env.VUE_ ...
DNS与CDN知识汇总（前端优化一）
什么是DNS? 域名系统DNS(Domain Name System),他由三部分组成(名称解析器,域名空间,名称服务器),他是一个分布式数据库,功能是联系域名和ip地址,域名和ip对应,被称为记录, ...
vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
解决方法 1.压缩图片应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...
vue 一个页面有点请求需要同时发送_前端性能优化，这些你都需要知道
来源: 海洋里的魔鬼鱼前言最近花了一些时间在项目的性能优化上,背后做了很多工作,但是最后依然没有达到自己想要的结果,有些失望,但是还是记录下自己的执着. 性能优化总结:减少请求次数.减小资源大小. ...
VUE 通过EXTERNALS 加载外部CDN资源，减少打包体积
目录前端性能优化方案 1.在vue.config.js 里面的写入如下配置使用externals 代码在vue.config.js里面设置打包排除项使用此配置项 con ...

Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)

Vue 配置使用 externals 使用cdn减小打包体积

在 vue.config.js 中书写配置

在入口文件中书写配置（一般是 public/index.html ）

Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)相关推荐

最新文章

热门文章

Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)

Vue 配置使用 externals 使用cdn减小打包体积

在 vue.config.js 中 书写配置

在入口文件中书写配置 （一般是 public/index.html ）

Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)相关推荐

最新文章

热门文章

在 vue.config.js 中书写配置

在入口文件中书写配置（一般是 public/index.html ）