webpack优化之配置排除打包与引用网络资源

在项目中我们用到第三方库时需要把第三方的库 全部打包到自己的项目中吗?

比如:xlsx这个包就很大(715K)，而且这类插件长期不需要我们进行更新，所以没有必要打包进来！

目标

通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。

例如:让 webpack 不打包 vue xlsx 和 element

使用方式

先找到 vue.config.js， 添加 externals 项，具体如下：

configureWebpack: {

  // 省略其他....
  externals: {
     /**
      * externals 对象属性解析。
      *  基本格式：
      *     '包名' : '在项目中引入的名字'
      *  
    */
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

再次运行打包，我们会发现包的体积已经大幅减小：上面的三个包已经不在打包的目标文件中了。

那么新的问题来了 选择由于项目没有Vue所以挂了 现在我们就需要通过公共网络资源方式把除在外的包引入在index.html

具体配置-在生产环境时生效

注意，在开发项目时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用环境变量来进行区分。具体如