2.通过externals加载外部CDN资源

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

jsDelivr - A free, fast, and reliable CDN for open source

搜CDN网站

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在
externals中的第三方依赖包，都不会被打包。

项目中

顺便做下判断是开发还是发布判断的页面显示

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 修改默认打包mainchainWebpack: config => {// 发布config.when(process.env.NODE_ENV === 'production', config => {config.entry('app').clear().add('./src/main-prod.js')// 自动查找js文件从public的index.html中找config.set('externals', {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios',lodash: '_',echarts: 'echarts',nprogress: 'NProgress','vue-quill-editor': 'VueQuillEditor'})// 配置网页标题处于发布就true,开发isProd=false 判断如何渲染页面结构config.plugin('html').tap(args => {args[0].isProd = truereturn args})})// 开发config.when(process.env.NODE_ENV === 'development', config => {config.entry('app').clear().add('./src/main-dev.js')// 配置网页标题处于发布就true,开发isProd=falseconfig.plugin('html').tap(args => {args[0].isProd = falsereturn args})})}
})

然后在index.html页面把需要的配置下.第三步就省略了，顺便把elementui也引过来,

<!DOCTYPE html>
<html lang="">
<head><meta charset="utf-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="width=device-width,initial-scale=1.0" name="viewport"><link href="<%= BASE_URL %>favicon.ico" rel="icon"><title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title><% if(htmlWebpackPlugin.options.isProd){ %><!-- nprogress 的样式表文件 --><link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" rel="stylesheet"/><!-- 富文本编辑器 的样式表文件 --><link href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" rel="stylesheet"/><link href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" rel="stylesheet"/><link href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" rel="stylesheet"/><!-- element-ui 的样式表文件 --><link href="https://cdn.staticfile.org/element-ui/2.6.3/theme-chalk/index.css" rel="stylesheet"/><script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script><script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script><script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script><!-- 富文本编辑器的 js 文件 --><script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script><!-- element-ui 的 js 文件 --><script src="https://cdn.staticfile.org/element-ui/2.6.3/index.js"></script><% }%>
</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 -->
</body>
</html>

然后把main-prod.js中的注释掉

2.通过externals加载外部CDN资源相关推荐

Vue + 项目优化通过externals加载外部CDN资源
问题: 生成打包报告时,终端vue ui指令,通过可视化UI面板查看报告,在可视化的UI面板中,通过控制台和分析面板,看到项目中所存在的问题 echarts,element-ui,quill等依赖项所 ...
VUE 通过EXTERNALS 加载外部CDN资源，减少打包体积
目录前端性能优化方案 1.在vue.config.js 里面的写入如下配置使用externals 代码在vue.config.js里面设置打包排除项使用此配置项 con ...
html src加载外部静态资源,前端性能优化2:静态资源加载与优化
css和js的装载与执行-HTML 页面加载渲染的过程一个网站在浏览器端是如何进行渲染的呢? 流程示意图.png HTML渲染过程的一些特点顺序执行.并发加载(单个域名的并发数量是有限的,所以多个 ...
前端学习（2046）vue之电商管理系统电商系统之通过externals加载外部资源
android jar 加入图片,Android动态加载外部jar包及jar包中图片等资源文件
Android动态加载外部jar包及jar包中图片等资源文件 Android应用程序由Java开发,因此Java中许多实用的特性,在Android中也有体现.动态加载Class,也就是外部jar包,在 ...
Android热修复技术初探（三）：动态加载外部资源
前面已经介绍了Android平台上的几种ClassLoader,这几种ClassLoader都有各自的使用场景,有了这些基础知识之后,才能更好地理解以及探究Android热修复技术.首先我们来探究怎么 ...
Spark动态加载外部资源文件
Spark动态加载外部资源文件 1.spark-submit --files 动态加载外部资源文件之前做一个关于Spark的项目时,因项目中需要读取某个静态资源文件,然后在本地IDEA测试一切皆正常 ...
使用jQuery和YQL，以Ajax方式加载外部内容
我们来看看怎样使用jQuery,以Ajax方式加载外部(其他域上)的内容.这里的所有代码都可以从GitHub下载,也可以在这个演示页面中获取,因而不用复制粘贴了. OK,Ajax通过jQuery是很容 ...
AS3加载外部swf资源库中的元件(MovieClip)
AS3加载外部swf资源库中的元件(MovieClip),使用场景:加载远程服务器的资源,多用于产品化业务. 外部资源库的元件给出AS连接,用于在代码中反射,下面伪代码中体现为 "mc_li ...

2.通过externals加载外部CDN资源

2.通过externals加载外部CDN资源相关推荐

最新文章

热门文章