最近写项目,4个平台的项目由一个代码库管理,超过50个.vue文件,导致代码量过大,每次构建打包速度都很慢,
下面是针对vue打包构建优化的一些测试结果:
第一次npm run dev :
![图片缺失](https://i-blog.csdnimg.cn/blog_migrate/7eaf0e281acc65d4c649c8f64a68466e.png)
第一次npm run build构建:
![图片缺失](https://i-blog.csdnimg.cn/blog_migrate/4a0d4c861476deaa92f456711f366906.png)
优化修改如下:
1,采用cdn加载UI库,把不常改变的库放到index.html中,通过cdn引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-iview-axios-router-laydate</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@3.1.3/dist/styles/iview.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/iview@3.1.3/dist/iview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
</body>
</html>
2,修改build/webpack.base.conf.js文件,在 module.exports = { } 中添加代码,其目的是:这样webpack就不会把vue.js, vue-router, iview库打包了
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'iview': 'Iview',
'axios': 'Axios',
},
3,取消生成map文件,找到config/index.js中的productionSourceMap: true,把true改为false;
/**
* Source Maps
*/
productionSourceMap: false,
优化后npm run dev:
![图片缺失](https://i-blog.csdnimg.cn/blog_migrate/9c536c63396c06e0f70b4cdc0cdb9d9e.png)
优化后npm run build构建:
![图片缺失](https://i-blog.csdnimg.cn/blog_migrate/c9c968ce1ce3fc50d13dc9eb06cd6547.png)