详解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 相关文章推荐
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
深入学习JavaScript对象
Oct 13 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
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队列用法实例
2014/11/05 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python线程threading模块用法详解
2020/02/26 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
材料会计岗位职责
2014/03/06 职场文书
旅游文化节策划方案
2014/06/06 职场文书
个人授权委托书模板
2014/09/14 职场文书
纪委立案决定书
2015/06/24 职场文书
幼儿园六一主持词
2015/06/30 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python