可以先通过npm run preview -- --report查看项目文件什么文件的体积比较大可以将这些文件配置cdn（从在线地址上拿取我们要的文件减少我们项目的体积）。
cdn配置：
1.排除大体积打包文件
externals // // 排除这几个第三方的体积比较大的包 // 如果是这样操作，这个配置项不管是生产模式还是开发模式都是有效果的 我们最好来一个if...else... // externals: // { // 'vue': 'Vue', // 'element-ui': 'ELEMENT', // 'xlsx': 'XLSX' // }
2.配置cdn的线上地址
let cdn = { css: [], js: [] } // 通过环境变量 来区分是否使用cdn const isProd = process.env.NODE_ENV === 'production' // 判断是否是生产环境 let externals = {} if (isProd) { // 如果是生产环境 就排除打包 否则不排除 externals = { // key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字) 'vue': 'Vue', // 后面的名字不能随便起 应该是 js中的全局对象名 'element-ui': 'ELEMENT', // 都是js中全局定义的 'xlsx': 'XLSX' // 都是js中全局定义的 } cdn = { css: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 提前引入elementUI样式 ], // 放置css文件目录 js: [ 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js', // vuejs 'https://unpkg.com/element-ui/lib/index.js', // element 'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx 相关 'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js' // xlsx 相关 ] // 放置js文件目录 } }
3.利用webpack html-wenpack-plugin 的api引入到index.html中。
