详解Webpack如何引入CDN链接来优化编译后的体积
背景
在 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="https://unpkg.com/vue/dist/vue.js"></script> <!-- CDN方式引入element-ui --> <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script> </body>
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 之后就不存在按需引入这种说法啦！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Javascript中判断一个值是否为undefined的方法详解
这篇文章给大家详细介绍了在Javascript中如何判断一个值是否为undefined，对大家的日常工作和学习很有帮助，下面来一起看看吧。2016-09-09
这篇文章主要为大家详细介绍了dropload.js插件下拉刷新和上拉加载的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要为大家介绍了Fuse.js模糊查询算法学习指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
在本篇文章中小编给大家整理了一篇关于a标签调用js的几种方法的相关内容，有此需要的朋友们可以参考下。2019-09-09
在你的网页中嵌入外部网页的方法...2007-04-04
这篇文章主要为大家详细介绍了JS实现简单计数器，有加、减和零三个按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了ES6中new Function()语法及应用,结合实例形式分析了ES6中new Function()的基本语法、功能、原理、闭包等相关使用技巧,需要的朋友可以参考下2020-02-02
下面小编就为大家带来一篇详谈innerHTML innerText的使用和区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家带来一篇信息滚动效果的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
基本js实现的星星投票选择功能代码。2010-07-07
最新评论