记一次Vue项目优化

主要思路是：使用CDN加载库，减小体积，开启Gzip压缩

在vue.config.js中配置

module.exports = {
  chainWebpack: (config) => {
    // 配置路径别名
    config.resolve.alias
      //set第一个参数：设置的别名，第二个参数：设置的路径
      .set('@', resolve('./src'));
    // 根据环境不同配置不同的项目入口
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      // 在externals配置下，webpake将会忽略对应import,不从 bundle 中引用依赖的方式
      config.set('externals', {
        vue: 'Vue', // 'import Vue(变量名) from vue(包名)'
        'vue-router': 'VueRouter', // 'import VueRouter from vue-router'
        axios: 'axios',
        'highlight.js': 'hljs',
        vuex: 'Vuex',

      })
      // 为index.html提供一个参数，判断是否处于开发模式
      config.plugin("html").tap(args => {
        args[0].isProd = true
        return args
      })

    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      config.set('externals', {
        'vue-router': 'VueRouter',
      })
      config.plugin("html").tap(args => {
        args[0].isProd = false
        return args
      })
    })
  },
  // 开启Gzip压缩
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 配置webpack 压缩
      config.plugins.push(
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.css$/,
          // 超过4kb压缩
          threshold: 4096
        })
      )
    }
  }
};

在index.html判断是否属于生产模式，并引入对应的cdn资源

  <% if(htmlWebpackPlugin.options.isProd){ %>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.1.1/styles/atelier-cave-dark.min.css" />

  <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/highlight.js/10.1.1/highlight.min.js"></script>

  <% }%>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js"></script>

这里推荐三个常用的cdn站点

staticfile bootcdn jsdelivr

结果

优化前

简简单单的配置，效果还不错