使用vue-cli时减少npm run build后vendor.js大小的方法
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文介绍了在使用Vue CLI构建项目时，如何通过优化配置来减小生产环境中vendor.js文件的体积，从而提高应用加载性能。
当使用vue-cli进行项目构建（npm run build）后，如果发现生成的vendor.js文件体积过大，这将直接影响到首屏加载时间，降低用户体验。为了解决这个问题，可以采取以下方法。
首先需要理解问题的本质：vue-cli的npm run build命令默认会将node_modules下的依赖项打包进vendor.js文件中。这种做法虽然简单方便，但当项目依赖项较多时会导致vendor.js变得异常庞大。对于一些不会频繁更新的依赖库，例如vue、axios、element-ui等，我们可以采取CDN的方式引入，这样用户在访问网站时可以不必每次都下载这些库，而是直接从CDN加载，减少文件大小，加快页面加载速度。
接下来是具体的操作步骤：
1. 在项目根目录下的index.html文件中使用CDN引入这些依赖库。例如：
```html
```
注意，在生产环境中通常使用.min.js版本以减少文件体积。
2. 修改项目根目录下的buildwebpack.base.config.js文件，声明不打包的依赖项。例如：
```javascript
externals: {
vue: Vue,
axios: axios,
element-ui: ELEMENT
}
```
这样配置后，在构建过程中不会将这些外部依赖打包进vendor.js文件中。
2018年1月27日，为了进一步优化打包文件，可以安装并配置compression-webpack-plugin插件以启用生产环境的Gzip压缩。具体步骤如下：
1. 安装插件：
```bash
npm install --save-dev compression-webpack-plugin
```
2. 在webpack配置中启用该插件，并设置相关选项，如productionGzip为true，productionGzipExtensions指定需要压缩的文件类型。
3. 修改webpack配置后，在main.js文件中有对不应打包的依赖的import引入时，需去掉这些引用。否则即使在externals字段声明了也不起作用。
4. 在项目configindex.js中开启gzip压缩也有助于优化打包后的文件大小。
通过使用CDN加载依赖库和优化webpack的配置，可以有效减少vendor.js文件的大小，加快页面加载速度，提高用户体验。需要注意的是，在实施这些策略时要确保生产环境支持Gzip压缩，并且客户端浏览器能够处理压缩过的文件。
全部评论 (0)
