最近写项目,4个平台的项目由一个代码库管理,超过50个.vue文件,导致代码量过大,每次构建打包速度都很慢,
下面是针对vue打包构建优化的一些测试结果:
第一次npm run dev :
第一次npm run build构建:
优化修改如下:
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/[email protected]/dist/styles/iview.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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:
优化后npm run build构建: