Moxuy

moxuy

0%

配置vue.config.js将尺寸较大的依赖替换为CND

发表于 更新于

在生产环境中，许多依赖的版本是不会改变的，比如vue、vuex这些，所以可以将这些依赖在编译过程中替换为cdn形式，这样每次版本更新的时候就可以不用重新下载这些js了。

具体代码如下：

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const isProd = process.env.NODE_ENV === 'production'

const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    echarts: 'echarts',
    lrz: 'lrz',
    xlsx: 'XLSX'
  },
  css: [],
  // https://unpkg.com/browse/vue@2.6.10/
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js',
    '//cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js',
    '//cdn.jsdelivr.net/npm/lrz@4.9.41/dist/lrz.all.bundle.min.js',
    '//cdn.jsdelivr.net/npm/xlsx@0.16.9/dist/xlsx.min.js'
  ]
}
vueConfig = {
  configureWebpack: {
    externals: isProd ? assetsCDN.externals : {}
  },
  chainWebpack: config => {
    if (isProd) {
      config.plugin('html').tap(args => {
        args[0].cdn = assetsCDN
        return args
      })
    }
  }
}

index.html

1
2
3
4
5
6
7
8
9
10
11
<html>
  ...
  <body>
    ...
    <!-- require cdn assets js -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>

在这个过程中，遇到一个坑，就是开发过程中的功能都是没问题的，但是一打包发布就会出现问题，主要是cdn和package.json中的依赖版本不一致导致的。