vue中通过externals的方式引入echarts(优化打包时间)

注意下webpack的版本

在vue.config.js中设置configureWebpack的externals

module.exports = {
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    open: true,
    port: 8001,
    overlay: {
      errors: true,
      warnings: true
    }
  },
  configureWebpack:{
    externals: {
      "echarts": "echarts"
    },
  },
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
  }
}

如下图 

vue中通过externals的方式引入echarts(优化打包时间)_第1张图片

在index.html文件中引入cdn上存储的echarts文件

 

如下图 

vue中通过externals的方式引入echarts(优化打包时间)_第2张图片

在需要的vue组件中使用




你可能感兴趣的:(webpack,echarts,vue)