Webpack怎么引入CDN链接来优化编译后的体积

这篇文章主要介绍了Webpack怎么引入cdn链接来优化编译后的体积,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

目前创新互联建站已为1000+的企业提供了网站建设、域名、虚拟空间、网站托管、服务器托管、企业网站设计、建昌网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

背景

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

步骤

1.引入CDN链接

在项目的 index.html 中,常规方式引入 CDN 链接,此处以 vue 和 element-ui 为例:


 
       

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怎么引入CDN链接来优化编译后的体积”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站栏目:Webpack怎么引入CDN链接来优化编译后的体积
当前地址:http://pwwzsj.com/article/gisgdg.html

其他资讯