参考：https://blog.csdn.net/feiyu_may/article/details/80987404
https://blog.csdn.net/qq_41999617/article/details/88052534
1. 查看各部分文件大小及编译后文件大小
(1) 使用webpack-bundle-analyzer工具，先安装依赖包
npm install cross-env --save-dev
(2) 然后在package.json的scripts中添加
"analyze":"cross-env NODE_ENV=production npm_config_report=true npm run build"
如下
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build" }
(3) 执行npm run analyze，就会在浏览器自动打开一个页面显示文件信息。如下图
每一块是一个编译文件及其所编译的源文件内容，最上方的文件是编译完成的文件，下面的其他文件就是此编译文件所编译的源文件，色块的大小代表文件大小，这样我们可以很直观地看出哪些文件比较大。
2. 几种压缩文件的方式。
(1)、vue-router懒加载
export default new Router({ routes: [{ path: ‘/‘, name: ‘Home‘, meta: { index: 0, keepAlive: true, title: ‘首页‘ }, component: resolve => require([‘../components/Home‘], resolve) //关键 }, { path: ‘/mine‘, name: ‘Mine‘, meta: { index: 1, keepAlive: false, title: ‘个人中心‘ }, component: resolve => require([‘../components/Mine‘], resolve) }]
(2)、工程文件打包的时候不生成.map文件
npm run build编译之后，我们查看编译生成的文件，发现有很多.map文件，这些文件也占了不小的空间。.map文件的作用是帮助编译后的代码调试，但是我们上线的代码已经调试完成，所以上线时可以不生成.map文件。
在config/index.js中将productionSourceMap的值修改为false
(3)、gzip压缩
安装插件
npm install --save-dev compression-webpack-plugin
在config的index.js文件找到productionGzip，将属性值false改为true。
(4)、CDN
在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。
index.html中
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
webpack.base.config.js中
entry: { app: ‘./src/main.js‘ }, externals: { //关键 ‘vue‘: ‘Vue‘, ‘vue-router‘: ‘VueRouter‘, // ‘vuex‘: ‘Vuex‘, ‘axios‘: ‘axios‘, ‘element-ui‘: ‘ELEMENT‘ }, output: { path: config.build.assetsRoot, filename: ‘[name].js‘, publicPath: process.env.NODE_ENV === ‘production‘ ? config.build.assetsPublicPath : config.dev.assetsPublicPath },