前端项目优化之旅（六）—— 引入并使用 CDN

前端项目优化之旅系列随笔主要记录工作中遇到的一些优化方案，这里记录一下引入和使用 CDN 的过程。

¶一、为什么

当引入的组件越来越多时，运用 webpack 打包后的 app.js 文件容易变得过大，对首屏加载很不友好。

¶二、怎么办

¶1、package.json

在package.json中删除即将通过 CDN 引入的组件，主要在 dependencies 和 devDependencies 中，删除 node_modules 后重新安装

¶2、vue.config.js

引入 CDN 文件并配置 webpack，可以有效缓解加载速度慢的问题。

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      vant: 'vant',
      'element-ui': 'ELEMENT',
      'dingtalk-jsapi': 'dd',
      echarts: 'echarts'
    }
  },
  chainWebpack: config => {
    const cdn = {
      css: [
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vant/index.css',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/element-ui/element-ui-index.css'
      ],
      js: [
        process.env.NODE_ENV === 'development' ? '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vue/v2.6.11.js' : '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vue/v2.6.11.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vue-router/v3.1.6.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vant/vant.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vuex/v3.1.2.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/axios/v0.19.2.min.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/dingtalk-jsapi/dingtalk.open.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/element-ui/index.js',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/echarts/echarts.min.js'
      ]
    }
    // 如果使用多页面打包，使用 vue inspect --plugins 查看 html 是否在结果数组中
    config.plugin('html').tap(args => {
      // html中添加cdn
      args[0].cdn = cdn
      return args
    })
  }
}

¶3、public/index.html

在<head></head>标签中添加以下代码使用：

<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>

<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

¶4、main.js

main.js 中可能有引入相关组件的 css 文件，当使用了 css 文件的 CDN 时，无需在 main.js 中继续引用。如：

// main.js
import Vant from 'vant';
// import 'vant/lib/index.css'; // 使用了该 css 文件的 CDN 时，无需在 main.js 中引用
Vue.use(Vant);

// import 'element-ui/lib/theme-chalk/index.css'
// import Element from 'element-ui'
// Vue.use(Element, { size: 'small' })