在 vue-cli 构建的项目中配置使用资源CDN,加速我们的项目
写在前面实现目标目标过程一、配置需要拎出来的模块二、配置 cdn 链接写在前面
出于对网站性能的要求,有时候我们不希望一些比较大的第三方库直接打包到最后的bundle
中,而会选择在打包的时候忽略他们,并直接使用CDN
上面的资源。
生产环境中将项目依赖的一些第三方包替换成通过cdn
方式外部加载,而不是打包到vender
,对于提升应用的加载、响应速度很有意义。
在vue-cli3
及以后的项目中,相关配置都需要在vue.config.js
这个文件中进行,如果你没有这个文件请自己新建一个(与package.json
同级)。
实现目标
以目前常见的前端项目为例,建议把常用的资源进行cdn
引用及配置;如:vue
、vuex
、vue-router
、axios
、elementUI
...
目标过程
一、配置需要拎出来的模块
这里我们首先配置configureWebpack
的externals
字段,把不需要打包的资源进行相应的配置。如下所示:
module.exports = {...configureWebpack: {externals: {'vue': 'Vue','element-ui': 'ELEMENT','vue-router': 'VueRouter','vuex': 'Vuex'}},...}
这里我们排除了vue
,element-ui
,vue-router
和vuex
。
关于这个配置怎么写的问题:
以打包时忽略
element-ui
为例,'element-ui'
指的是你import
语句中import ElementUI from 'element-ui'
中的'element-ui'
,'ELEMENT'
是element-ui
这个库暴露出来的全局对象。这个对象你可以从cdn
资源的源码中找到或者根据需要引用的文件去node_modules
文件夹下去寻找。下面我们从node_modules
文件夹下的源码找一下element-ui
,vue-router
和vuex
暴露出的全局对象,以下是各源码的截图:
以后需要排除其他的三方库或者插件的时候,大家可以自己去找暴露出来的全局对象了。
二、配置 cdn 链接
配置完externals
之后我们还需要利用htmlWebpackPlugin
的能力让我们在打包的时候可以获取我们需要的cdn
资源数据。首先我们在vue.config.js
定义一个存放cdn
资源连接的对象cdn
,如下所示:
const cdn = {css: ['///element-ui@2.13.0/lib/theme-chalk/index.css'],js: ['///vue@2.6.11/dist/vue.min.js','///vue-router@2.8.1/dist/vue-router.min.js','///vuex@3.1.2/dist/vuex.min.js','///element-ui@2.13.0/lib/index.js']}
其次我们把cdn
这个对象放入我们配置中的page
字段里,完整配置如下:
const cdn = {css: ['///element-ui@2.13.0/lib/theme-chalk/index.css'],js: ['///vue@2.6.11/dist/vue.min.js','///vue-router@2.8.1/dist/vue-router.min.js','///vuex@3.1.2/dist/vuex.min.js','///element-ui@2.13.0/lib/index.js']}module.exports = {publicPath: '/',productionSourceMap: process.env.NODE_ENV !== 'production',devServer: {port: 8077},chainWebpack: config => {config.resolve.symlinks(true)},configureWebpack: {externals: {'vue': 'Vue','element-ui': 'ELEMENT','vue-router': 'VueRouter','vuex': 'Vuex'}},pages: {index: {entry: 'src/main.ts',template: 'public/index.html',filename: 'index.html',title: 'sass-admin',chunks: ['chunk-vendors', 'chunk-common', 'index'],cdn: cdn}}}
做完这些之后,我们还需要在入口文件的html
模板处加上生成css
和js
脚本的代码,比如这里的html
模板位置就是'public/index.html'
。
这里比较简单就直接放送完整的html
模板代码了,如下:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title><% for (let i in htmlWebpackPlugin.options.cdn.css) { %><link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" /><% } %></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><% for (let i in htmlWebpackPlugin.options.cdn.js) { %><scripttype="text/javascript"src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %></body></html>
其中:
<%= VALUE %>
用来做不转义插值<% expression %>
用来描述JavaScript
流程控制
这些用到了lodash template
的语法 ,感兴趣的朋友可以去了解更多内容,这里不做展开。
做完这一切之后我们用打包分析工具分析一下配置完 CDN 前后bundle
内容的变化。
配置cdn
之前的分析图:
配置cdn
之后的分析图:
通过对比,发现我们的chunk-vendors
已经少了我们配置在 CDN 中的第三方资源,另一个直观的比较就是打包后chunk-vendors
的资源大小,这里不再展开。另一个重要的变化就是我们打包之后的html
上也加上了相应的资源脚本,如图所示:
把资源放在 CDN 上一方面可以减轻自己服务器的带宽消耗(资源从别的服务器下载,而不是你自己的服务器),另一方面 CDN 上的资源一般是你不会轻易修改的,而且浏览器访问之后还会缓存下来,用户再次访问就无需二次下载资源,网站后续的整体访问速度就更快了,同时 CDN 还可以做加速。
—————————— 【正文完】——————————
推荐阅读:灰信网(软件开发博客聚合 - 程序员专属的优秀博客文章阅读平台
前端学习交流群,想进来面基的,可以加群: 832485817,685486827;
写在最后: 约定优于配置 —— 软件开发的简约原则
——————————【完】——————————
我的:
个人网站: https://neveryu.github.io/neveryu/
Github: /Neveryu
新浪微博: /Neveryu
微信: miracle421354532
更多学习资源请关注我的新浪微博…好吗