vue打包速度优化(vue cdn优化)

Vue打包优化-CDN加速

优化原因

使用cdn加速前的打包数据如下。可以看到，element-ui、vue、vuex、vue-router依赖都被输入到chunk-vendors.js中，导致体积很大。假设很多依赖关系较大的话，也会影响单页应用的首屏加载速度，所以这里采用了一种打包优化的方法来分离依赖关系。

查看依赖版本

首先，项目中需要使用依赖。在我的项目中，我打算将element-ui、vue、vuex、vue-router等依赖分离出来，并记录依赖版本以备后用。

依赖名称依赖版本vue2.6.11vue-router3.2.0vuex3.4.0element-ui2.15.9

查看依赖引用

可以看到main.js中引用了这些依赖。

项目中开发环境和生产环境的一些配置是不同的，所以这里截图方便后面理解。

配置开发环境和生产环境

上面我们已经看到了如何在main.js中引用依赖项。现在我们需要进行一些更改，将main.js更改为main-dev.js作为我们的开发环境，然后在同一目录中创建一个新的。该文件名为main-prod.js作为我们的生产环境。实际开发中，开发环境和生产环境的配置是不同的。

开发环境入口-main-dev.js

//这是设置ElementUI组件库组件的默认参数Vue.use(ElementUI,{size:'small',zIndex:3000});

生产环境入口-main-prod.js

//这是设置ElementUI组件库组件的默认参数Vue.prototype.$ELEMENT={size:'small',zIndex:3000};

配置开发环境入口和生产环境入口

这里需要注意的是配置入口，因为默认入口文件只有一个main.js，但是你把它改成了main-dev.js，并添加了一个新的main-prod.js，然后运行项目或者打包项目肯定会因为找不到main.js而报错，所以这里需要通过vue.config.js文件指定生产环境和开发环境入口。

vue.config.js

//判断是否是生产环境constisProduction=process.env.NODE_ENV!=='development';module.exports={publicPath:'./',//不添加此项可能会导致静态资源不可用被发现条件。chainWebpack:config={config.when(isProduction,config={//如果是生产环境，则使用main-prod.js作为入口文件config.entry('app').clear().add('./src/main-prod.ts');});config.when(!isProduction,config={//如果不是生产环境，则使用main-dev.js作为入口文件(我这里的ts和js是一样的)config.entry('app').clear().add('./src/main-dev.ts');});}}；

配置CDN加速

完成以上环境配置就成功了一半。接下来需要配置CDN加速相关的东西。

vue.config.js

这里需要解释一下。下面的cdn加速链接中显示的依赖版本是否与上面显示的依赖版本表相同？一定是一样的。否则出现依赖版本冲突问题怎么办？

关于externals属性，它告诉webpack需要排除的依赖名称以及窗口上挂载的对象属性名称。这是常用表的简单列表。如果需要其他可以通过插件依赖导出到窗口的对象名称，也可以在百度上查找对应的。对象属性名称。

依赖名称窗口挂载的对象属性名称vueVuevue-routerVueRoutervuexVuexlodash_element-uiELEMENTconstisProduction=process.env.NODE_ENV!=='development';constcdn={externals:{vue:'Vue','vue-router':'VueRouter',vuex:'Vuex','element-ui':'ELEMENT'},css:['',],js:['',''，''，''min.js']};module.exports={publicPath:'./',chainWebpack:config={config.when(isProduction,config={config.entry('app').clear().add('./src/main-prod.ts');//我们想要的是在生产环境进行cdn优化！这个理解起来非常重要//告诉webpack需要排除的依赖名称以及挂载的对象属性窗口上的Name.config.set('externals',cdn.externals);//这里的作用是在后续的index.html页面中通过link和script标签来加载这些cdn链接config.plugin('html').tap(args={args[0].cdn=cdn;返回参数；});});config.when(!isProduction,config={config.entry('app').clear().add('./src/main-dev.ts');});}}；

index.html

这里还需要说明一下，这个index.html页面的位置一般是在public目录下。

下面的htmlWebpackPlugin.options.cdn对象看起来熟悉吗？不就是我们在vue.config.js中通过生产环境配置config.plugin(‘html’)添加的属性吗？这确实是一个接一个的链接。

!DOCTYPEhtmlhtmllang='zh'head元字符集='utf-8'元http-equiv='X-UA-Compatible'内容='IE=edge'元名称='视口'内容='宽度=设备宽度，initial-scale=1.0'linkrel='icon'href='%=BASE_URL%favicon.ico'title%=htmlWebpackPlugin.options.title%/title!--从此处的cdn配置加载css文件--%for(variinhtmlWebpackPlugin.options.cdnhtmlWebpackPlugin.options.cdn.css){%linkhref='%=htmlWebpackPlugin.options.cdn.css[i]%'rel='pload'as='style'/linkhref='%=htmlWebpackPlugin.options.cdn.css[i]%'rel='stylesheet'/%}%!--这里从cdn配置加载js文件--%for(variinhtmlWebpackPlugin.options.cdnhtmlWebpackPlugin.options.cdn.js){%linkhref='%=htmlWebpackPlugin.options.cdn.js[i]%'rel='pload'as='script'/%}%/headbodynoscriptStrong我们很抱歉但%=htmlWebpackPlugin.options.title%在未启用JavaScript的情况下无法正常工作。请启用它以继续。/strong/noscriptdivid='app'/div!--构建的文件将自动注入--!--此处来自在cdn配置中加载js文件--%for(variinhtmlWebpackPlugin.options.cdnhtmlWebpackPlugin.options.cdn.js){%scriptsrc='%=htmlWebpackPlugin.options.cdn.js[i]%'/script%}%/body/html

打包测试

完成以上步骤后，cdn打包优化完成。现在运行打包测试。

下面将打包后的数据与没有进行CDN优化的打包后的数据进行对比。是否排除了依赖关系？包装时间也变得更快。

面试的时候你是不是感觉更有自信了？