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

 更新时间:2019-06-25 03:00:57   作者:佚名   我要评论(0)

背景


在 Vue 项目中,引入到工程中的所有 js 文件,编译时都会被打包进 vendor.js,也就导致了 vendor.js 文件体积变得相当臃肿,一定程度上影响着页面的渲

背景

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 详解webpack 打包文件体积过大解决方案(code splitting)
  • 彻底解决 webpack 打包文件体积过大问题

相关文章

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

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

    背景 在 Vue 项目中,引入到工程中的所有 js 文件,编译时都会被打包进 vendor.js,也就导致了 vendor.js 文件体积变得相当臃肿,一定程度上影响着页面的渲
    2019-06-25
  • 在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page import="java.awt.*,java.awt.image.*,com.sun.image.codec.j
    2019-06-25
  • 详解Java中的scala正则表达式

    详解Java中的scala正则表达式

    Scala 通过 scala.util.matching 包中的 Regex 类来支持正则表达式。 eg:使用正则表达式查找单词 Scala 实例中使用 String 类的 r() 方法构造了一个Regex对
    2019-06-25
  • 微信小程序自定义多列选择器使用详解

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

    一、预览 微信小程序在自带的表单组件中加入了选择器picker,并给出了常用的时间和省市区三级联动选择器,但日常开发中不可能仅仅使用这些选择器,所以我们在
    2019-06-25
  • 微信小程序实现圆形进度条动画

    微信小程序实现圆形进度条动画

    本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下 上图: 代码: js: //获取应用实例 var app = getApp() var interval; var
    2019-06-25
  • JSP使用过滤器防止Xss漏洞

    JSP使用过滤器防止Xss漏洞

    在用java进行web业务开发的时候,对于页面上接收到的参数,除了极少数是步可预知的内容外,大量的参数名和参数值都是不会出现触发Xss漏洞的字符。而通常为了避
    2019-06-25
  • JS中超越现实的匿名函数用法实例分析

    JS中超越现实的匿名函数用法实例分析

    本文实例讲述了JS中超越现实的匿名函数用法。分享给大家供大家参考,具体如下: 一般函数: function show1(name){ alert(name); //打印:zhangsan }
    2019-06-25
  • 使用Vue开发自己的Chrome扩展程序过程详解

    使用Vue开发自己的Chrome扩展程序过程详解

    前言 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。 好消
    2019-06-25
  • javascript实现自由编辑图片代码详解

    javascript实现自由编辑图片代码详解

    当下我们项目中需要一个可自由编辑图片的功能,当图片可能出现需要频繁编辑,同时能满足发现裁剪不满意想要微调的时候,会发现如果我们处理图片按照平常的习惯
    2019-06-25
  • vue配置文件实现代理v2版本的方法

    vue配置文件实现代理v2版本的方法

    vue实现不同服务器代理,接上篇,虽然可实现多版本代理,但是每增加一种模式就需要重下新修改vue.config.js以及.env.dev.local,感觉很不智能,扩展性挺差。
    2019-06-25

最新评论