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

 
Vue webpack Js/Css/jQuery

一、打包分析

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/element-ui@2.15.3/lib/theme-chalk/index.css'

    ],

    js: [

      'https://cdn.jsdelivr.net/npm/vue@2.6.11',

      'https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js',

      'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',

      'https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js',

      'https://cdn.jsdelivr.net/npm/element-ui@2.15.3/lib/element-ui.common.min.js',

      'https://cdn.jsdelivr.net/npm/axios@0.21.1/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 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8">

    <title><%= htmlWebpackPlugin.options.title %></title>


    <!-- 使用 CDN 的 CSS 文件 start -->

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

      <link href="<%= htmlWebpackPlugin.options.CDN.css[i] %>" rel="stylesheet">

    <% } %>

    <!-- 使用 CDN 的 CSS 文件 end -->


    <!-- 使用 CDN 的 JS 文件 -->

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

      <script src="<%= htmlWebpackPlugin.options.CDN.js[i] %>"></script>

    <% } %>

    <!-- 使用 CDN 的 JS 文件 end -->

  </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 -->

  </body>

</html>

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/element-ui@2.15.3/lib/index.js)

图2-5

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

图2-6


作者：YiYaYiYaHei

链接：https://www.jianshu.com/p/ae78c2d5d4f0

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


有话要说