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


Posted in Javascript onJune 21, 2019

背景

在 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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
最简单的tab切换实例代码
May 13 Javascript
javascript实现标签切换代码示例
May 22 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
Vue多环境代理配置方法思路详解
Jun 21 #Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 #Javascript
使用express来代理服务的方法
Jun 21 #Javascript
react+redux仿微信聊天界面
Jun 21 #Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
Vue.js中的extend绑定节点并显示的方法
Jun 20 #Javascript
You might like
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
劣质的PHP代码简化
2010/02/08 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python编写猜数字小游戏
2019/10/06 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
应届大学生的推荐信
2013/11/20 职场文书
通用自荐信范文
2014/03/14 职场文书
六查六看剖析材料
2014/10/06 职场文书
岳庙导游词
2015/02/04 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书