前端性能优化二十五：花裤衩模板vue打包优化

(1). 优化vue.js:

①. 修改vue.config.js:
    const isProd = process.env.NODE_ENV === 'production'
    const getProdExternals = () => {
      return {
        'vue': 'Vue',
        // 'vue-router': 'VueRouter',
        // 'vuex': 'Vuex'
      }
    }
    module.exports = {
      ...
      configureWebpack: {
        ...
        externals: isProd ? getProdExternals() : {}
      }
    }

②. 在public/index.html文件中引入vue cdn路径:
    <script src="//cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    a. 不写协议前缀,会与网站的协议相同.所以,可以不写https.

②. 'vue': 'Vue'说明:
    a. key是node模块名称,value是项目中对模块的引用
    b. 前面的vue是代码中import A from B中的B
    c. 后面的Vue是引入的cdn暴露的变量:
       (1). 可以在console控制台打印window,会发现window.Vue
       (2). 这个Vue就是需要的变量名称

(2). 优化index.html写法:

vue.config.js:

const cdn = {
  css: [],
  js: [
    // 与package.json里面的版本对应
    '//cdn.bootcss.com/vue/2.6.10/vue.min.js',
    '//cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
    '//cdn.bootcss.com/vuex/3.1.0/vuex.min.js'
  ]
}
module.exports = {
  chainWebpack(config) {
    ...
    config.plugins.delete('prefetch')

    // 加载配置
    config.plugin('html').tap(args => {
      if (process.env.NODE_ENV === 'production') {
        args[0].cdn = cdn
      }
      return args
    })

    ...
  }
}

index.html:

<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<% } %>

<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>">script>
<% } %>