三、webpack优化之第三方库使用 CDN 加载(vue)

本文主要介绍对第三方库（如echarts、element-ui等）的打包优化。
采用cdn加载需要联网。

一、打包分析

1.1 速度分析

使用speed-measure-webpack-plugin插件可以让我们知道各个模块的耗时情况和打包总耗时

1.1.1 安装

npm i -D speed-measure-webpack-plugin

1.1.2 vue.config.js配置

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 你使用到的其他插件
        ]
    })
}

1.1.3 结果

打包总耗时为 25.4secs

图1-1

项目启动时，也可以看到启动耗时

图1-2

1.2 体积分析

webpack打包体积分析这里没有用额外的插件，就使用了webpack自带的。

图1-3

1.2.1 package.json配置

在 package.json中添加一条命令：

"//": "在/dist/report.html中查看webpack打包报告",
 "report": "vue-cli-service build --report",

1.2.2 结果

执行npm run report，生成的体积报告在/dist/report.html中

图1-4

由此可见，第三方库占比最大，因此采用CDN加载。

二、第三方库使用 CDN 加载

为了方便以后管理，将CDN相关的所有配置写入cdn.config.js(与vue.config.js同级)

2.1 cdn.config.js配置

module.exports = {
  // 是否使用cdn
  useCDN: true,
  // key是'包名', value是静态资源引入后全局的名称 import Vue from 'vue'
  externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'echarts': 'echarts',
    // 必须是ELEMENT，否则会报‘elementUI is not defined’
    'element-ui': 'ELEMENT'
  },
  CDN: {
    // CDN链接地址：https://www.jsdelivr.com/
    css: [
      'https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css'
    ],
    js: [
      'https://cdn.jsdelivr.net/npm/[email protected]',
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js',
      'https://cdn.jsdelivr.net/npm/[email protected]/lib/element-ui.common.min.js',
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js'
    ]
  }
}

2.2 vue.config.js配置

const isPRD = process.env.NODE_ENV === 'production';
// cdn相关配置
const cdnConfig = require('./cdn.config.js');

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
      title: '系统名称',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
      // 调用：htmlWebpackPlugin.options.CDN（设置CDN链接）
      CDN: isPRD && cdnConfig.useCDN ? cdnConfig.CDN : null
    }
  },
  configureWebpack: {
    // 生产环境注入CDN
    externals: isPRD && cdnConfig.useCDN ? cdnConfig.externals : {}
  }
}

2.3 index.html



  
    
    <%= htmlWebpackPlugin.options.title %>

    
    <% for (var i in htmlWebpackPlugin.options.CDN && htmlWebpackPlugin.options.CDN.css) { %>
      
    <% } %>
    

    
    <% for (var i in htmlWebpackPlugin.options.CDN && htmlWebpackPlugin.options.CDN.js) { %>
      
    <% } %>

2.4 main.js修改

index.html已经引入了element.ui的css，所以这里不需要重复引入

// 引入element-ui组件库
import ElementUI from 'element-ui';
// index.html已经引入了element.ui的css，所以这里不需要重复引入
// import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2.5 结果

由图2-1可知，采用了cdn加载后打包总耗时由原来的25.4secs变为14.75secs

图2-1

由图2-2可知，采用了cdn加载后打包体积也变小了

图2-2

图2-3

由图2-4可知，使用cdn加载的第三方库没有进行打包

图2-4

2.6 可能遇到的问题

图2-5的错误是cdn引用的element.ui链接问题：需要引入lib/index.js文件(列如https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js)

图2-5
图2-6的错误是externals外部扩展的value值不对，应为'element-ui': 'ELEMENT'

图2-6

一、webpack优化之Gzip（vue）
二、webpack优化之去除冗余代码（vue）