定位问题

关于如何进行打包优化，首先推荐一个插件webpack-bundle-analyzer。该插件能在打包时生成分析报告，明确的告诉我们各个静态资源的大小以及组成结构，让我们一眼就能定位到造成打包文件过大的元凶。该插件目前是已集成到vue-cli中了，如果没有，强烈建议先安装一个。

引用CDN资源

大部分项目打包后文件过大都是因为引用了完整的三方UI库。如果项目改为按需引入则需要修改很多地方，不是很现实。所以我们只能把这些三方库改为引用CDN外部资源。以下是具体修改步骤

1、配置webpack中的externals

PS: 如果项目中有vue.config.js就在这个文件里配置，如果没有则在/build/webpack.base.conf.js中配置。externals中的key是项目使用中需要import的名字，value是第三方库暴露出来的方法名 
// build/webpack.base.conf.js中进行配置
module.exports = {
  //...
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'vant': 'vant',
    'element-ui': 'ELEMENT',
    'qs': 'Qs'
  }
}

// vue.config.js中进行配置
module.exports = {
  //...
  configureWebpack: {
    //...
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'vant': 'vant',
      'element-ui': 'ELEMENT',
      'qs': 'Qs'
    }
  }
}

2、在/index.html中，引入相应的js、css这些CDN资源

PS: 虽然是引用的外部资源，但项目中一样要import、Vue.use(xxx)。如import ElementUI from 'element-ui'; Vue.use(ElementUI); 这里的'element-ui'就是上边externals中的key

相关资料

上一篇 下一篇