关于项目打包优化，和element is defined的问题

项目打包时如何进行优化 ‘and’ 打包时element报错is defined

element is defined的问题将写在文章最后面

Ⅰ：可以使用vue-cli本身提供的性能分析工具进行打包分析 npm run preview – --report （四个 ‘-’ 符号）

Ⅱ：打包完成后会显现两个地址

我们可以输入下面的第二个网址，或者运行在打包后的（dist）文件夹下找到report.html文件，

分析页面效果如图：（左侧菜单栏可见总共大小为2.08M）

此时可以看到 “elementUI” 和 “xlsx” 两个文件占比较大，也说明了文件比较大。这样用户浏览的速度就会变慢，此时我们就要对文件大的进行优化处理。

注意： 如果想打包后能运行，记得在vue.config.js文件中把 ‘/’ 修改成 './'

Ⅲ：同样在vue.config.js文件中，找到configureWebpack对象，在里面设置externals对象，在externals里写入过大的文件，代表不打包进最后的包里

代码如下：（便于复制）

externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
    }

我的打包排除了，Vue，element-ui，xlsx。

上面图片代码就是把打包后文件过大的，不打入最后的包里。这里只有第三方插件才可以进行此操作

Ⅳ：再次重新打包，就会发现其中不一样之处了
由2.08M变成了448.24K，是不是小了很多！？但是此时的项目也等于没有Vue,ElementUI和xlsx，项目也无法正常运行了。

解决方法：引入外部资源（通过第三方的CDN方式引入）

这里就不再对CDN进行细说，直接进入正题

Ⅰ：依然在vue.config.js文件中，可进行定义两个空对象，（必须使用let定义空变量，因为vscode会自动转成const，记得改回let）

代码如下：（便于复制）

// 空对象  用于在configureWebpack中直接调用
let externals = {}
// 空对象 数组，用来存放css和js文件
let cdn = { css: [], js: [] }
// 判断是否是生产环境
const isProdution = process.env.NODE_ENV === 'production'
if (isProdution) {
  externals = {
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      // element-ui css 样式表
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js'
    ]
  }
}

上面图片中的路径，可参考 https://unpkg.com/

Ⅱ：在configureWebpack对象中，把原来写的externals对象注释掉，更改使用方法
Ⅲ：两个空对象，已经使用了一个，下面使用第二个

代码如下：（便于复制）

// 注入 cdn 变量 （打包时会执行）
    config.plugin('html').tap(args => {
      args[0].cdn = cdn // 配置cdn给插件
      return args
    })

从图片中代码 113行 开始，就是我们使用的第二个空对象。上面有注释，我就不多解释了

Ⅳ： 在public文件夹下找到 index.html 通过配置CDNConfig 依次注入 css 和 js。

代码如下：（便于复制）

<!-- 引入CSS -->
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
    <% } %>

<!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%=js%>"></script>
    <% } %>

Ⅴ：重新打包查看效果即可（此时可以是package.json中的打包命令）我的为：npm run build:prod

Ⅵ：至于打包后运行 显示 element is defined的问题，

externals = {
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX'
}

如果你的element-ui的值，不是大写的ELEMENT，那么就会报 element is defined 的错误，只需改成ELEMENT即可。