详解Webpack如何引入CDN链接来优化编译后的体积
背景
在Vue项目中，引入到工程中的所有js文件，编译时都会被打包进vendor.js，也就导致了vendor.js文件体积变得相当臃肿，一定程度上影响着页面的渲染。为了减少编译后的体积，提高页面渲染速度，我们可以通过引入CDN链接把库分离，多线程异步js库，从而达到加速渲染的目的。那么我们如何做呢？
步骤
1.引入CDN链接
在项目的index.html中，常规方式引入CDN链接，此处以vue和element-ui为例：
2.添加externals属性
Vue-cli2
在项目的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-cli3
在项目根目录的vue.config.js中，将configureWebpack配置代码块添加进入即可：
module.exports={
configureWebpack:{
externals:{
'vue':'Vue',
'element-ui':'ElementUI'
}
}
}
注意：在上述代码中，'vue':'Vue'对应形式为key:value，其中key为项目中引用的名称，而value是资源本身定义的名称（不可改），正常情况下我们可以参照src/main.js进行查看：
importVuefrom'vue' importElementUIfrom'element-ui' //打开src/main.js查阅以上两行代码，其前面作为value，后面作为key。
3.注释import及Vue.use(xxx)
在项目的src/main.js中，注释掉以下语句：
//importVuefrom'vue' //importElementUIfrom'element-ui' //import'element-ui/lib/theme-chalk/index.css' importAppfrom'./App' Vue.config.productionTip=false //Vue.use(ElementUI)
注：使用eslint规则的项目请不要注释import及Vue.use，除非你不使用那烦人的eslint。
完成以上步骤后就可以开始执行npmrunbuild，你会发现编译后的vendor.js从几百K降到几十K，也就意味着优化体积已经成效。 另外，有好多网友先前为了减少体积就已经配置了按需引入，如果引入CDN之后，记得把按需引入的配置去掉哦，因为引入CDN之后就不存在按需引入这种说法啦！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。