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

栏目: JavaScript · 发布时间: 5年前

内容简介:在 Vue 项目中,引入到工程中的所有 js 文件,编译时都会被打包进 vendor.js,也就导致了 vendor.js 文件体积变得相当臃肿,一定程度上影响着页面的渲染。为了减少编译后的体积,提高页面渲染速度,我们可以通过引入 CDN 链接把库分离,多线程异步 js 库,从而达到加速渲染的目的。那么我们如何做呢?在项目的 index.html 中,常规方式引入 CDN 链接,此处以 vue 和 element-ui 为例:

背景

在 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 之后就不存在按需引入这种说法啦!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机程序设计艺术(第1卷)

计算机程序设计艺术(第1卷)

[美] 唐纳德·E. 克努特 / 苏运霖 / 国防工业出版社 / 2002-9 / 98.00元

7卷本《计算机程序设计艺术》的第1卷以基本的程序设计概念和技术开始,然后专注于信息结构——计算机内部信息的表示、数据元素之间的结构关系以及如何有效地处理它们,给出了对于模拟、数值方法、符号计算、软件和系统设计的初等应用。书中附有大量习题和答案,标明了难易程序及数学概念的使用。 此新版本增加了几十项简单且重要的算法和技术,并对有关数学预备知识作了大量修改以适应现时研究的趋势。一起来看看 《计算机程序设计艺术(第1卷)》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器