我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

Vue_CLI 项目打包优化配置

预计阅读时间: 2 分钟

前言

  使用 Vue-cli 脚手架构建的开发环境，在项目开发完成之后使用脚手架自带的 webpack 打包工具进行项目打包上线，但是打完包之后生成的 dist 文件中 css 文件和 vendor.xxx.js 文件占用很大内存，以至于首次加载很慢。为了优化打包文件，对项目进行了相应的配置和文件引用的调整，从而减小打包后的文件体积。

配置如下：

一、引用 cdn 代替项目引入的文件

代码示例
1<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
2<script src="https://cdn.staticfile.org/element-ui/2.10.1/index.js"></script>
3<script src="https://cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js"></script>
4<script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>

使用  staticfile开源 cdn 代替 vue、element-ui、vue-router 和 axios。

二、Vue-CLI 2.X 项目优化配置

配置 webpack.base.conf.js 文件

代码示例
1module.exports = {
2	...
3  // 配置cdn包
4  externals:{
5  	'vue': 'Vue',
6    'element': 'element-ui',
7    'vue-router': 'VueRouter',
8    'axios': 'axios'
9  }
10  ...
11};

三、Vue-CLI 3.X 项目优化配置

在项目根目录新建 vue.config.js 文件，其配置如下：

代码示例
1module.exports = {
2    publicPath: './', // 文件访问路径配置（./ 相对路径& / 绝对路径）
3    devServer: {
4        open: true, // 项目启动时自动打开浏览器
5    },
6    configureWebpack: {
7        externals: {
8            'vue': 'Vue',
9            'element': 'ELEMENT',
10            'vue-router': 'VueRouter',
11            'axios': 'axios'
12        }
13    },
14    lintOnSave: false,
15    productionSourceMap: false // 项目打包时是否生成.map文件
16  ...
17};
总结
  • 通过 CDN 链接方式加载项目包管理文件，可以大大减少项目打包生成时的文件大小。
  • 打包前注掉 import XXX from 'XXX'、Vue.use(xxx) 可以减少打包后的体积，从而实现优化代码。