分析项目

1、打包项目获取项目分析图

npm run build -- --report

2、打包项目生成的dist文件夹中有一个report.html文件

3、打开就会看到项目分析

4、根据分析图进行优化

去除插件

• 在vue.config.js文件中添加externals

  -添加externals是为了让webpack 不打包这些插件

• 把externals添加给configureWebpack

• 例如

// 去除 elementUI xlsx  和 vue 
   const externals = {
            // '插件名'：'插件导出的对象'
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'xlsx': 'XLSX'
        }
    
   configureWebpack: {
       ...
       externals
    }

使用插件的CND地址

• 去除插件之后，项目是无法正常运行的
• 因此需要添加插件的在线地址
• 声明一个变量保存这些地址

    // 声明一个数组保存插件的cdn地址
  const  jsCDN = [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js',
        'https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.4/xlsx.min.js'
    ]

• 通过 html-webpack-plugin注入到 index.html之中

    chainWebpack(config) {
        // 拦截html的生成, 在参数中添加 cdn 数组
        config.plugin('html').tap(args => {
                args[0].jsCDN = jsCDN
                return args
            })
        }

• 然后在public/index.html文件中注入

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

• 这时再打包文件就发现文件体积变小了

此配置不能在开发模式下使用

• 在线地址在开发过程中不方便使用

• 所以，可以判断是开发环境还是生产环境，进行动态去除插件

• 例如

// 获取当前环境
const isDev = process.env.ENV === 'development'
let externals = {}
let jsCDN = []
    // 如果是开发环境，则不需要去除插件
if (!isDev) {
    // 排除 elementUI xlsx  和 vue 
    // 不打包以下插件
    externals = {
            // '插件名'：'插件导出的对象'
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'xlsx': 'XLSX'
        }
        // 声明一个数组保存插件的cdn地址
    jsCDN = [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js',
        'https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.4/xlsx.min.js'
    ]
}