打包基于 vue-element-admin 项目遇到的问题记录及解决方案

1、npm ERR! missing script: build

打包命令错误，虽然通常都是 npm run build，但也要看实际需要。

README.md 文档里有写

## Build

```bash

# build for test environment

npm run build:stage

# build for production environment

npm run build:prod

下图是使用 npm run build:stage 打包的结果，报了三个警告。

使用 npm run build:prod

2、asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

部分 asset  资源过大（超过244 KiB），恐会影响web性能。

备注：KiB

KB MB GB 等进制为1024，而在国际单位制中TB、GB、MB、KB是 1000 进制，为此国际电工协会（IEC）拟定了"KiB"、“MiB”、“GiB"的二进制单位，专用来标示“1024进位”的数据大小，所以 KB 写成 KiB 更规范一些。

3、entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). 

部分 entrypoint  资源过大（超过244 KiB），恐会影响web性能。

webpack performance recommendations:

You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

代码拆分是webpack最引人注目的功能之一。此功能使您可以将代码分成多个捆绑包，然后可以按需或并行加载。它可用于实现较小的捆绑包并控制资源负载优先级，如果正确使用，则会对负载时间产生重大影响。

共有三种通用的代码拆分方法：

• 入口点：使用entry配置手动拆分代码。
• 防止重复：使用Entry依赖项或SplitChunksPlugin对重复数据块进行重复数据删除和拆分。
• 动态导入：通过模块中的内联函数调用拆分代码。

4、分析构建文件体积

如果你的构建文件很大，你可以通过 webpack-bundle-analyzer 命令构建并分析依赖模块的体积分布，从而优化你的代码。

npm run preview -- --report

运行之后你就可以在 http://localhost:9526/report.html 页面看到具体的体积分布

根据分析结果，优化 elementUI 和 echarts，使用按需引入的方式，而不是全部引用资源。

还要一些没有用到的组件和没必要的设置文件如 layout/components/Settings 都删掉。

按需引入 elementUI

https://element.eleme.cn/#/zh-CN/component/quickstart

按需引入 echarts

https://echarts.apache.org/zh/builder.html

卸载 echarts

npm uninstall echarts

再次打包看效果，整体包体积已经小于 2M 啦，虽然 echarts 体积很大。

对比 使用 npm install echarts  在组件中引入 import echarts from 'echarts'

虽然 echarts 体积小了，但是整体包体积大了。