详解Webpack如何引入CDN链接来优化编译后的体积

站长资源 2024/11/26 佚名

2 0 1

背景

在 Vue 项目中，引入到工程中的所有 js 文件，编译时都会被打包进 vendor.js，也就导致了 vendor.js 文件体积变得相当臃肿，一定程度上影响着页面的渲染。为了减少编译后的体积，提高页面渲染速度，我们可以通过引入 CDN 链接把库分离，多线程异步 js 库，从而达到加速渲染的目的。那么我们如何做呢？

步骤

1.引入CDN链接

在项目的 index.html 中，常规方式引入 CDN 链接，此处以 vue 和 element-ui 为例：

<body>
 <div id="app"></div>
 <!-- CDN方式引入vue -->
 <script src="/UploadFiles/2021-04-02/vue.js">

2.添加externals属性


Vue-cli 2
在项目的 build/webpack.base.conf.js 中，在下面合适位置添加 externals 相关语句，在 entry 后面加入即可：


module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
 function: './src/main.js'
 },
 externals:{
 'vue': 'Vue',
 'element-ui': 'ElementUI'
 }
 ...
}



Vue-cli 3
在项目根目录的 vue.config.js 中，将 configureWebpack 配置代码块添加进入即可：


module.exports = {
 configureWebpack:{
 externals: {
  'vue': 'Vue',
  'element-ui': 'ElementUI'
 }
 }
}



注意：在上述代码中，'vue': 'Vue' 对应形式为 key : value，其中 key 为项目中引用的名称，而 value 是资源本身定义的名称（不可改），正常情况下我们可以参照 src/main.js 进行查看：


import Vue from 'vue'
import ElementUI from 'element-ui'
//打开src/main.js查阅以上两行代码，其前面作为value，后面作为key。



3.注释import及Vue.use(xxx)


在项目的 src/main.js 中，注释掉以下语句：


// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import App from './App'

Vue.config.productionTip = false

// Vue.use(ElementUI)




注：使用 eslint 规则的项目请不要注释 import 及 Vue.use，除非你不使用那烦人的 eslint。
完成以上步骤后就可以开始执行 npm run build，你会发现编译后的 vendor.js 从几百K降到几十K，也就意味着优化体积已经成效。 另外，有好多网友先前为了减少体积就已经配置了 按需引入，如果引入 CDN 之后，记得把按需引入的配置去掉哦，因为引入 CDN 之后就不存在按需引入这种说法啦！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

webpack,体积优化,webpack,cdn体积优化

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“详解Webpack如何引入CDN链接来优化编译后的体积”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

详解Webpack如何引入CDN链接来优化编译后的体积

微信小程序自定义多列选择器使用详解

Vue多环境代理配置方法思路详解

评论“详解Webpack如何引入CDN链接来优化编译后的体积”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接